<!DOCTYPE html>

<!--
                           _ooOoo_
                          o8888888o
                          88" . "88
                          (| -_- |)
                          O\  =  /O
                       ____/`---'\____
                     .'  \\|     |//  `.
                    /  \\|||  :  |||//  \
                   /  _||||| -:- |||||-  \
                   |   | \\\  -  /// |   |
                   | \_|  ''\---/''  |   |
                   \  .-\__  `-`  ___/-. /
                 ___`. .'  /--.--\  `. . __
              ."" '<  `.___\_<|>_/___.'  >'"".
             | | :  `- \`.;`\ _ /`;.`/ - ` : | |
             \  \ `-.   \_ __\ /__ _/   .-` /  /
        ======`-.____`-.___\_____/___.-`____.-'======
                           `=---='
        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
                 佛祖保佑       永无BUG 
-->



  


<html class="theme-next mist use-motion" lang="zh-Hans">
<head>
  <meta charset="UTF-8"/>
<link href="//mydearest.cn" rel="dns-prefetch">
<link href="//www.mydearest.cn" rel="dns-prefetch">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">





	<meta name="description" content="陈宇的博客" />






<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

















  
  
  
  

  
    
    
  

  
    
      
    

    
  

  

  
    
      
    

    
  

  
    
      
    

    
  

  
    
    
    <link href="//fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic|Roboto Slab:300,300italic,400,400italic,700,700italic|Lobster Two:300,300italic,400,400italic,700,700italic|PT Mono:300,300italic,400,400italic,700,700italic&subset=latin,latin-ext" rel="stylesheet" type="text/css">
  





  <meta name="keywords" content="知识," />





  <link rel="alternate" href="/rss2.xml" title="cosyer's Blog" type="application/atom+xml" />




  
  <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" />






<meta name="description" content="javascript-puzzlers voidvoid其实是javascript中的一个函数，接受一个参数，返回值永远是undefined void expression 1234567void 0  void() // 报错void (0)  void &quot;hello&quot;  void (new Date())  // all will return undefined  context === v">
<meta name="keywords" content="知识">
<meta property="og:type" content="article">
<meta property="og:title" content="你所不知道的前端冷门小知识(长期更新)">
<meta property="og:url" content="http://mydearest.cn/smallknowledge.html">
<meta property="og:site_name" content="cosyer&#39;s Blog">
<meta property="og:description" content="javascript-puzzlers voidvoid其实是javascript中的一个函数，接受一个参数，返回值永远是undefined void expression 1234567void 0  void() // 报错void (0)  void &quot;hello&quot;  void (new Date())  // all will return undefined  context === v">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="http://cdn.mydearest.cn/blog/images/reverse.jpg">
<meta property="og:image" content="http://cdn.mydearest.cn/blog/images/empty.png">
<meta property="og:image" content="http://cdn.mydearest.cn/blog/images/equality.png">
<meta property="og:image" content="http://cdn.mydearest.cn/blog/images/grayFilter.png">
<meta property="og:updated_time" content="2020-05-07T16:01:14.808Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="你所不知道的前端冷门小知识(长期更新)">
<meta name="twitter:description" content="javascript-puzzlers voidvoid其实是javascript中的一个函数，接受一个参数，返回值永远是undefined void expression 1234567void 0  void() // 报错void (0)  void &quot;hello&quot;  void (new Date())  // all will return undefined  context === v">
<meta name="twitter:image" content="http://cdn.mydearest.cn/blog/images/reverse.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    sidebar: {"position":"left","display":"always","offset":12,"offset_float":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: true,
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="http://mydearest.cn/smallknowledge.html"/>





  <title>你所不知道的前端冷门小知识(长期更新) | cosyer's Blog</title>
  





  <script type="text/javascript">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?653a4be35cb6c7b26817038a17c3f0d6";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>











  
<link href="https://mydearest.cn/css/all-9097fb9016.css" rel="stylesheet" type="text/css">
<style>
// scrollbar滚动条样式优化

::-webkit-scrollbar-corner {
  background-color: transparent;
}

::-webkit-scrollbar-button {
  width: 0;
  height: 0;
  display: none;
}

::-webkit-scrollbar-thumb {
  width: 7px;
  background-color: #b4babf;
  border-radius: 7px;
}

::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  width: 15px;
}

::-webkit-scrollbar:hover {
  background-color: transparent;
}

* {
    cursor: url("http://cdn.mydearest.cn/blog/images/miku1.png"),auto!important
}
:active {
    cursor: url("http://cdn.mydearest.cn/blog/images/miku2.png"),auto!important
}
a:hover {
    cursor: url("http://cdn.mydearest.cn/blog/images/miku2.png"),auto!important
}
</style>
</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-Hans">

  <div id="loader">
    <div></div>
  </div>

  
  
    
  

  <div class="container sidebar-position-left page-post-detail ">
    <div class="headband"></div>
    <a href="https://github.com/cosyer" class="github-corner" aria-label="View source on Github"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; left: 0; transform: scale(-1, 1);" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style></a>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">cosyer's Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description">Blog</h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" class="faa-parent animated-hover" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home faa-wrench"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-links">
          <a href="/links/" class="faa-parent animated-hover" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-link faa-shake"></i> <br />
            
            友链
          </a>
        </li>
      
        
        <li class="menu-item menu-item-guestbook">
          <a href="/guestbook/" class="faa-parent animated-hover" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-comment-o faa-tada"></i> <br />
            
            留言板
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" class="faa-parent animated-hover" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive faa-float"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" class="faa-parent animated-hover" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user faa-horizontal"></i> <br />
            
            关于
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger faa-parent animated-hover">
          
            
              <i class="menu-item-icon fa fa-search faa-burst fa-fw"></i> <br />
            
            搜索
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off"
             placeholder="搜索..." spellcheck="false"
             type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>



    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-date" data-datetime="2020-05-08T00:01:14+08:00">
    <div class="post-time-text">5月</div>
    <div class="post-time-count">08</div>
    <div class="text-desc">
			<div class="date-text">更新于</div>
      <div class="post-tiem">5月08</div>
      <div class="post-year">2020</div>
		</div>
  </div>
  
  
  

  <div class="post-badge">
    
            <span class="post-category" >
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/知识/" itemprop="url" rel="index">
                    <span itemprop="name">知识</span>
                  </a>
                </span>

                
                
              
            </span>
    
  </div>

  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="http://mydearest.cn/smallknowledge.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="陈宇（cosyer）">
      <meta itemprop="description" content="不去做的话永远也做不到。">
      <meta itemprop="image" content="/images/avatar.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="cosyer's Blog">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">你所不知道的前端冷门小知识(长期更新)</h2>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="发表于" itemprop="dateCreated datePublished" datetime="2018-06-11T21:55:52+08:00">
                2018-06-11
              </time>
            

            

            
          </span>

          


          
            
          

          
          
             <span id="/smallknowledge.html" class="leancloud_visitors" data-flag-title="你所不知道的前端冷门小知识(长期更新)">
               <span class="post-meta-divider">|</span>
               <span class="post-meta-item-icon">
                 <i class="fa fa-eye"></i>
               </span>
               
                 <span class="post-meta-item-text">热度 </span>
               
                 <span class="leancloud-visitors-count"></span> ℃
             </span>
          

          


          
            <div class="post-wordcount">
              
                
                  <span class="post-meta-divider">|</span>
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-pencil-square-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计：</span>
                
                <span title="字数统计：">
                  15,771 (字)
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长：</span>
                
                <span title="阅读时长：">
                  76 (分钟)
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p><a href="http://javascript-puzzlers.herokuapp.com/" target="_blank" rel="noopener">javascript-puzzlers</a></p>
<h2 id="void"><a href="#void" class="headerlink" title="void"></a>void</h2><p>void其实是javascript中的一个函数，接受一个参数，返回值永远是undefined
void expression</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">void</span> <span class="number">0</span>  </span><br><span class="line"><span class="keyword">void</span>() <span class="comment">// 报错</span></span><br><span class="line"><span class="keyword">void</span> (<span class="number">0</span>)  </span><br><span class="line"><span class="keyword">void</span> <span class="string">"hello"</span>  </span><br><span class="line"><span class="keyword">void</span> (<span class="keyword">new</span> <span class="built_in">Date</span>())  </span><br><span class="line"><span class="comment">// all will return undefined  </span></span><br><span class="line">context === <span class="keyword">void</span> <span class="number">666</span></span><br></pre></td></tr></table></figure>
<hr>
<a id="more"></a>
<h2 id="Element-scrollIntoViewIfNeeded"><a href="#Element-scrollIntoViewIfNeeded" class="headerlink" title="Element.scrollIntoViewIfNeeded"></a>Element.scrollIntoViewIfNeeded</h2><p>Element.scrollIntoViewIfNeeded()方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。 如果该元素已经在浏览器窗口的可见区域内，则不会发生滚动。
 <figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">element.scrollIntoViewIfNeeded(); <span class="comment">// 等同于element.scrollIntoViewIfNeeded(true) </span></span><br><span class="line">element.scrollIntoViewIfNeeded(<span class="literal">true</span>); </span><br><span class="line">element.scrollIntoViewIfNeeded(<span class="literal">false</span>);</span><br></pre></td></tr></table></figure></p>
<ul>
<li>当元素已经在可视区域时，调用 Element.scrollIntoView()，无论设置什么参数，均发生滚动。</li>
<li>当元素已经在可视区域时，调用 Element.scrollIntoViewIfNeeded()，无论设置什么参数，均不发生滚动。</li>
</ul>
<h2 id="JS取整数部分"><a href="#JS取整数部分" class="headerlink" title="JS取整数部分"></a>JS取整数部分</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">~~<span class="number">2.5</span> <span class="comment">// 2 按位取反 -2^31~2^31-1 -2147483648~2147483647</span></span><br><span class="line"><span class="number">2147483647</span> &gt;&gt; <span class="number">0</span>; <span class="comment">// =&gt; 2147483647</span></span><br><span class="line"><span class="number">2147483648</span> &gt;&gt; <span class="number">0</span>; <span class="comment">// =&gt; -2147483648</span></span><br><span class="line"><span class="number">2147483649</span> &gt;&gt; <span class="number">0</span>; <span class="comment">// =&gt; -2147483647</span></span><br><span class="line"></span><br><span class="line"><span class="number">0</span>|<span class="number">3.123</span>;<span class="comment">// 3 或运算</span></span><br><span class="line"><span class="number">4.3</span>|<span class="number">0</span>; <span class="comment">// 4</span></span><br><span class="line"><span class="number">4.3</span>&lt;&lt;<span class="number">0</span>; <span class="comment">// 4</span></span><br></pre></td></tr></table></figure>
<p>与Math.floor()的对比</p>
<table>
<thead>
<tr>
<th style="text-align:left">区别</th>
<th style="text-align:center">Math.floor</th>
<th style="text-align:right">~~</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">NaN</td>
<td style="text-align:center">NaN</td>
<td style="text-align:right">0</td>
</tr>
<tr>
<td style="text-align:left">+0</td>
<td style="text-align:center">+0</td>
<td style="text-align:right">0</td>
</tr>
<tr>
<td style="text-align:left">-0</td>
<td style="text-align:center">-0</td>
<td style="text-align:right">0</td>
</tr>
<tr>
<td style="text-align:left">+Infinity</td>
<td style="text-align:center">+Infinity</td>
<td style="text-align:right">0</td>
</tr>
<tr>
<td style="text-align:left">-Infinity</td>
<td style="text-align:center">-Infinity</td>
<td style="text-align:right">0</td>
</tr>
<tr>
<td style="text-align:left">1.2</td>
<td style="text-align:center">1.2</td>
<td style="text-align:right">1.2</td>
</tr>
<tr>
<td style="text-align:left">-1.2</td>
<td style="text-align:center">-1</td>
<td style="text-align:right">-1</td>
</tr>
</tbody>
</table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> 位运算：~ 的结果是 int32 的有符号整数，所以肯定不可能是 <span class="literal">NaN</span> 和无穷 x|<span class="number">0</span> x^<span class="number">0</span> x&lt;&lt;<span class="number">0</span> x&gt;&gt;<span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="number">2.</span> <span class="built_in">Math</span>.floor向下取整 <span class="built_in">Math</span>.ceil向上取整 <span class="built_in">Math</span>.trunc返回整数部分 实现：<span class="keyword">if</span>(value&gt;<span class="number">0</span>)&#123;<span class="keyword">return</span> <span class="built_in">Math</span>.floor(value)&#125;<span class="keyword">else</span>&#123;<span class="keyword">return</span> Mathg.ceil(value)&#125;</span><br><span class="line"></span><br><span class="line"><span class="number">3.</span> <span class="built_in">parseInt</span>(string, radix);</span><br><span class="line"></span><br><span class="line"><span class="built_in">parseInt</span>() 函数解析一个字符串参数，并返回一个指定基数的整数 (数学系统的基础)。</span><br><span class="line"></span><br><span class="line"><span class="built_in">parseInt</span> 解析字符串 <span class="string">'-0'</span> 会得到 <span class="number">-0</span>。如果参数是数字 <span class="number">-0</span>，会得到 <span class="number">0</span>。</span><br><span class="line"></span><br><span class="line"><span class="number">4.</span> <span class="function"><span class="keyword">function</span> <span class="title">trunc</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span>(num &gt;= <span class="number">0</span>) <span class="keyword">return</span> <span class="built_in">Math</span>.floor(num);</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Math</span>.ceil(num);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="number">5.</span> <span class="function"><span class="keyword">function</span> <span class="title">trunc</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> num - num % <span class="number">1</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<blockquote>
<p>在没有指定基数，或者基数为 0 的情况下，JavaScript 作如下处理：
如果字符串 string 以”0x”或者”0X”开头, 则基数是16 (16进制).
如果字符串 string 以”0”开头, 基数是8（八进制）或者10（十进制），那么具体是哪个
基数由实现环境决- 定。ECMAScript 5 规定使用10，但是并不是所有的浏览器都遵循这个
规定。因此，永远都要明确给出radix参数的值。
如果字符串 string 以其它任何值开头，则基数是10 (十进制)。</p>
</blockquote>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">parseInt</span>(<span class="number">0.0000000003</span>) <span class="comment">// 3</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">'2017-07-04'</span>) <span class="comment">// 2017</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">"010"</span>);	<span class="comment">// 8</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">"010"</span>, <span class="number">8</span>);	<span class="comment">// 8</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">"010"</span>, <span class="number">10</span>); <span class="comment">// 10</span></span><br></pre></td></tr></table></figure>
<ul>
<li>parseFloat(string)
它的规则与parseInt基本相同，但也有点区别：字符串中第一个小数点符号是有效的，另外parseFloat会忽略所有前导0，如果字符串包含一个可解析为整数的数，则返回整数值而不是浮点数值。<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">parseInt</span>(<span class="string">"0xA"</span>) <span class="comment">// 10</span></span><br><span class="line"><span class="built_in">parseFloat</span>(<span class="string">"0xA"</span>) <span class="comment">// 0</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">".1"</span>) <span class="comment">// NaN</span></span><br><span class="line"><span class="built_in">parseFloat</span>(<span class="string">".1"</span>) <span class="comment">// 0.1</span></span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="js取小数部分"><a href="#js取小数部分" class="headerlink" title="js取小数部分"></a>js取小数部分</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fract</span>(<span class="params">num</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> num - <span class="built_in">Math</span>.trunc(num);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(fract(<span class="number">3.75</span>)); <span class="comment">// 0.75</span></span><br><span class="line"><span class="built_in">console</span>.log(fract(<span class="number">-3.75</span>)); <span class="comment">// -0.75</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">3.75</span> % <span class="number">1</span>); <span class="comment">// 0.75</span></span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">-3.75</span> % <span class="number">1</span>); <span class="comment">// -0.75</span></span><br></pre></td></tr></table></figure>
<h2 id="JS浮点数运算-原因浮点数无法用二进制准确表示"><a href="#JS浮点数运算-原因浮点数无法用二进制准确表示" class="headerlink" title="JS浮点数运算(原因浮点数无法用二进制准确表示)"></a>JS浮点数运算(原因浮点数无法用二进制准确表示)</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">0.1</span>+<span class="number">0.2</span> <span class="comment">// 0.30000000000000004</span></span><br><span class="line"><span class="number">1.</span> <span class="built_in">parseFloat</span>().toFixed() </span><br><span class="line"><span class="number">2.</span> *<span class="number">100</span>/<span class="number">100</span></span><br></pre></td></tr></table></figure>
<h2 id="Object-toString"><a href="#Object-toString" class="headerlink" title="Object.toString()"></a>Object.toString()</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = &#123;<span class="attr">name</span>:<span class="string">'cosyer'</span>&#125;</span><br><span class="line">a.toString() <span class="comment">// [object Object] [typeof a instanceof a]</span></span><br><span class="line"><span class="comment">// 除了Object其他对象需要用call返回真正的类型信息</span></span><br></pre></td></tr></table></figure>
<h2 id="全等判断"><a href="#全等判断" class="headerlink" title="全等判断"></a>全等判断</h2><p>javascript 中 +0 完全等于 -0，那么怎么分区两者呢？</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>/<span class="number">0</span> === <span class="number">1</span>/<span class="number">-0</span> <span class="comment">// false </span></span><br><span class="line">+<span class="number">0</span> === <span class="number">-0</span> <span class="comment">// true</span></span><br><span class="line"><span class="built_in">Object</span>.is(+<span class="number">0</span>,<span class="number">-0</span>) <span class="comment">// false</span></span><br></pre></td></tr></table></figure>
<p>区分NaN</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">NaN</span> !== <span class="literal">NaN</span> <span class="comment">// true</span></span><br><span class="line"><span class="literal">NaN</span> === <span class="literal">NaN</span> <span class="comment">// false </span></span><br><span class="line"><span class="built_in">Object</span>.is(<span class="literal">NaN</span>,<span class="literal">NaN</span>) <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<h2 id="判断NaN"><a href="#判断NaN" class="headerlink" title="判断NaN"></a>判断NaN</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Number</span>.isNaN(); <span class="comment">// true 与isNaN全局函数相比，不存在类型转换更加严格</span></span><br><span class="line">x!==x <span class="comment">// =&gt;NaN false</span></span><br><span class="line"><span class="comment">// &#123;&#125;!==&#123;&#125; []!==[]</span></span><br></pre></td></tr></table></figure>
<h2 id="isFinite"><a href="#isFinite" class="headerlink" title="isFinite"></a>isFinite</h2><p>判定一个数字是否是有限数字(如果参数是 NaN，正无穷大或者负无穷大，会返回false，其他返回 true)
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">isFinite</span>(<span class="literal">Infinity</span>);  <span class="comment">// false</span></span><br><span class="line"><span class="built_in">isFinite</span>(<span class="literal">NaN</span>);       <span class="comment">// false</span></span><br><span class="line"><span class="built_in">isFinite</span>(-<span class="literal">Infinity</span>); <span class="comment">// false</span></span><br><span class="line"><span class="built_in">isFinite</span>(<span class="number">0</span>);         <span class="comment">// true</span></span><br><span class="line"><span class="built_in">isFinite</span>(<span class="number">2e64</span>);      <span class="comment">// true, 在更强壮的Number.isFinite(null)中将会得到false</span></span><br><span class="line"><span class="built_in">isFinite</span>(<span class="string">"0"</span>);       <span class="comment">// true, 在更强壮的Number.isFinite('0')中将会得到false</span></span><br></pre></td></tr></table></figure></p>
<h2 id="try-catch跳出forEach循环"><a href="#try-catch跳出forEach循环" class="headerlink" title="try-catch跳出forEach循环"></a>try-catch跳出forEach循环</h2><p>forEach遍历不能保证遍历的顺序，以及不能break;一般for循环的性能是forEach的20倍</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">try</span> &#123;</span><br><span class="line">    [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>].forEach(<span class="function"><span class="params">v</span> =&gt;</span> &#123;</span><br><span class="line">        <span class="keyword">if</span> (v === <span class="number">2</span>) &#123;</span><br><span class="line">            <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'my err'</span>)</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125; <span class="keyword">catch</span> (e) &#123;</span><br><span class="line">    <span class="keyword">if</span> (e.message === <span class="string">'my err'</span>) &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'breaked'</span>) </span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">throw</span> e</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 用some也可以在遍历中跳出循环</span></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].some(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="built_in">console</span>.log(item)</span><br><span class="line">  <span class="keyword">return</span> item === <span class="number">2</span> <span class="comment">// 如果item等于2就跳出循环</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<h2 id="fetch模拟post进行api测试"><a href="#fetch模拟post进行api测试" class="headerlink" title="fetch模拟post进行api测试"></a>fetch模拟post进行api测试</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">fetch(apiUrl, &#123;</span><br><span class="line">    method: <span class="string">'POST'</span>,</span><br><span class="line">    headers: &#123;</span><br><span class="line">        <span class="string">'Content-Type'</span>: <span class="string">'application/json'</span></span><br><span class="line">    &#125;,</span><br><span class="line">    body: <span class="built_in">JSON</span>.stringify(&#123;<span class="attr">q</span>: <span class="number">1</span>&#125;)</span><br><span class="line">&#125;).then(<span class="keyword">async</span> res =&gt; <span class="built_in">console</span>.log(<span class="keyword">await</span> res.json()))</span><br></pre></td></tr></table></figure>
<h2 id="实现var-a-add-2-3-4-函数柯里化"><a href="#实现var-a-add-2-3-4-函数柯里化" class="headerlink" title="实现var a = add(2)(3)(4) 函数柯里化"></a>实现var a = add(2)(3)(4) 函数柯里化</h2><p>js中console.log一个对象时，会对这个对象进行toString()操作，还有些情况会对对象进行valueOf()操作
vauleOf优先于toString()被调用</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">num</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> _add = <span class="function"><span class="keyword">function</span>(<span class="params">args</span>)</span>&#123;</span><br><span class="line">        num+=args;</span><br><span class="line">        <span class="keyword">return</span> <span class="built_in">arguments</span>.callee; <span class="comment">//  return add(num+args);</span></span><br><span class="line">        <span class="comment">// 现在已经不推荐使用arguments.callee();推荐这样写var _add = (function foo(args)&#123;num+=args return foo;&#125;)</span></span><br><span class="line">        <span class="comment">// 原因：访问 arguments 是个很昂贵的操作，因为它是个很大的对象，每次递归调用时都需要重新创建。影响现代浏览器的性能，还会影响闭包。</span></span><br><span class="line">    &#125;</span><br><span class="line">    _add.toString = _add.valueOf = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">return</span> num;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> _add;</span><br><span class="line">&#125;</span><br><span class="line">add(<span class="number">2</span>)(<span class="number">3</span>)(<span class="number">4</span>);<span class="comment">// function 9</span></span><br><span class="line">+add(<span class="number">2</span>)(<span class="number">3</span>)(<span class="number">4</span>) <span class="comment">// 9</span></span><br><span class="line">add(<span class="number">2</span>)(<span class="number">3</span>)(<span class="number">4</span>)+<span class="string">''</span> <span class="comment">// '9'</span></span><br></pre></td></tr></table></figure>
<h2 id="阶乘"><a href="#阶乘" class="headerlink" title="阶乘"></a>阶乘</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">factorial</span>(<span class="params">num</span>)</span>&#123;    </span><br><span class="line">   <span class="keyword">if</span> (num &lt;=<span class="number">1</span>) &#123;         </span><br><span class="line">      <span class="keyword">return</span> <span class="number">1</span>;     </span><br><span class="line">   &#125; <span class="keyword">else</span> &#123;         </span><br><span class="line">   <span class="keyword">return</span> num * factorial(num<span class="number">-1</span>)     </span><br><span class="line">   &#125; </span><br><span class="line">&#125; </span><br><span class="line"><span class="comment">// 定义阶乘函数一般都要用到递归算法；如上面的代码所示，在函数有名字，而且名字以后也不会变的情况下，这样定义没有问题。 </span></span><br><span class="line"><span class="comment">// 但问题是这个函数的执行与函数名 factorial 紧紧耦合在了一起。为了消除这种紧密耦合的现象，可以像下面这样使用 arguments.callee</span></span><br><span class="line"><span class="comment">// arguments 的主要用途是保存函数参数， 但这个对象还有一个名叫 callee 的属性，返回正被执行的 Function 对象，</span></span><br><span class="line"><span class="comment">// 也就是所指定的 Function 对象的正文，这有利于匿名函数的递归或者保证函数的封装性。 </span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">factorial</span>(<span class="params">num</span>)</span>&#123;    </span><br><span class="line">   <span class="keyword">if</span> (num &lt;=<span class="number">1</span>) &#123;         </span><br><span class="line">      <span class="keyword">return</span> <span class="number">1</span>;     </span><br><span class="line">   &#125; <span class="keyword">else</span> &#123;         </span><br><span class="line">   <span class="keyword">return</span> num * <span class="built_in">arguments</span>.callee(num<span class="number">-1</span>);</span><br><span class="line">   &#125; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> trueFactorial = factorial;</span><br><span class="line">factorial = <span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="number">0</span>;</span><br><span class="line">&#125;                </span><br><span class="line">alert(trueFactorial(<span class="number">5</span>));<span class="comment">// 120 如果没有使用arguments.callee，将返回0</span></span><br></pre></td></tr></table></figure>
<h2 id="arguments-callee的替换方案"><a href="#arguments-callee的替换方案" class="headerlink" title="arguments.callee的替换方案"></a>arguments.callee的替换方案</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">show</span>(<span class="params">n</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> arr = [];</span><br><span class="line">    <span class="keyword">return</span> (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        arr.unshift(n);</span><br><span class="line">        n--;</span><br><span class="line">        <span class="keyword">if</span> (n != <span class="number">0</span>) &#123;</span><br><span class="line">            <span class="built_in">arguments</span>.callee();</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> arr;</span><br><span class="line">    &#125;)()</span><br><span class="line">&#125;</span><br><span class="line">show(<span class="number">5</span>)<span class="comment">//[1,2,3,4,5]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 给内部函数一个名字（当函数被调用时，它的arguments.callee对象就会指向自身，也就是一个对自己的引用。）</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">show</span>(<span class="params">n</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> arr = [];</span><br><span class="line">    <span class="keyword">return</span> (<span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        arr.unshift(n);</span><br><span class="line">        n--;</span><br><span class="line">        <span class="keyword">if</span> (n != <span class="number">0</span>) &#123;</span><br><span class="line">            fn();</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> arr;</span><br><span class="line"></span><br><span class="line">    &#125;)()</span><br><span class="line">&#125;</span><br><span class="line">show(<span class="number">5</span>)<span class="comment">//[1,2,3,4,5]</span></span><br></pre></td></tr></table></figure>
<h2 id="Date相关"><a href="#Date相关" class="headerlink" title="Date相关"></a>Date相关</h2><h3 id="Date构造函数"><a href="#Date构造函数" class="headerlink" title="Date构造函数"></a>Date构造函数</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">4</span>种表示时间戳的方式</span><br><span class="line"><span class="number">1.</span> <span class="built_in">Date</span>.now()</span><br><span class="line"><span class="number">2.</span> <span class="keyword">new</span> <span class="built_in">Date</span>().getTime()</span><br><span class="line"><span class="number">3.</span> +<span class="keyword">new</span> <span class="built_in">Date</span>() / +<span class="keyword">new</span> <span class="built_in">Date</span> +相当于.valueOf();</span><br><span class="line"><span class="number">4.</span> <span class="keyword">new</span> <span class="built_in">Date</span>().valueOf()</span><br><span class="line"><span class="number">5.</span> <span class="keyword">new</span> <span class="built_in">Date</span>*<span class="number">1</span> / <span class="keyword">new</span> <span class="built_in">Date</span>()*<span class="number">1</span> </span><br><span class="line"></span><br><span class="line">解释：JavaScript中可以在某个元素前使用<span class="string">'+'</span>号，这个操作是将该元素转换秤<span class="built_in">Number</span>类型，如果转换失败，那么将得到 <span class="literal">NaN</span>。</span><br><span class="line">所以 +<span class="keyword">new</span> <span class="built_in">Date</span> 将会调用 <span class="built_in">Date</span>.prototype 上的 valueOf 方法，而根据MDN，<span class="built_in">Date</span>.prototype.value 方法等同于 <span class="built_in">Date</span>.prototype.getTime()</span><br><span class="line"></span><br><span class="line"><span class="built_in">Date</span>.parse(<span class="string">"2018-06-13"</span>) === <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="string">"2018-06-13"</span>).getTime()</span><br><span class="line"><span class="comment">// 浏览器之间解析时间不同 safari 解析横杠 - 会出错所以尽量用斜杠 /</span></span><br></pre></td></tr></table></figure>
<h3 id="当前时间"><a href="#当前时间" class="headerlink" title="当前时间"></a>当前时间</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> d = <span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line"><span class="keyword">let</span> year=d.getFullYear();</span><br><span class="line"><span class="keyword">let</span> month=d.getMonth()+<span class="number">1</span>; <span class="comment">// 月份索引从0开始</span></span><br><span class="line"><span class="keyword">let</span> day=d.getDate(); <span class="comment">// getDay()用于获取星期</span></span><br><span class="line"><span class="keyword">let</span> hour=d.getHours();</span><br><span class="line"><span class="keyword">let</span> minute=d.getMinutes();</span><br><span class="line"><span class="keyword">let</span> second=d.getSeconds();</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">`<span class="subst">$&#123;year&#125;</span>-<span class="subst">$&#123;month&#125;</span>-<span class="subst">$&#123;day&#125;</span> <span class="subst">$&#123;hour&#125;</span>:<span class="subst">$&#123;minute&#125;</span>:<span class="subst">$&#123;second&#125;</span>`</span>) <span class="comment">// 2018-6-13 21:20:48</span></span><br><span class="line"><span class="comment">// 不足2位数补0</span></span><br><span class="line"><span class="built_in">console</span>.log([year, month, day].map(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">        item = item.toString();</span><br><span class="line">    <span class="keyword">return</span> item[<span class="number">1</span>] ? item : <span class="string">"0"</span> + item;</span><br><span class="line">&#125;).join(<span class="string">"-"</span>) +<span class="string">" "</span> +[hour, minute, second].map(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">        item = item.toString();</span><br><span class="line">    <span class="keyword">return</span> item[<span class="number">1</span>] ? item : <span class="string">"0"</span> + item;</span><br><span class="line">&#125;).join(<span class="string">":"</span>))  <span class="comment">// 2018-06-13 21:20:48</span></span><br></pre></td></tr></table></figure>
<h3 id="Date计时"><a href="#Date计时" class="headerlink" title="Date计时"></a>Date计时</h3><p>以博客存活时间为例</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> time = <span class="keyword">new</span> <span class="built_in">Date</span>(); </span><br><span class="line"><span class="keyword">var</span> t = <span class="string">"博客存活了"</span>+<span class="built_in">Math</span>.floor((+<span class="keyword">new</span> <span class="built_in">Date</span> - <span class="number">1527868800000</span>) / (<span class="number">1000</span> * <span class="number">60</span> * <span class="number">60</span> * <span class="number">24</span>)) + <span class="string">"天"</span> + time.getHours() + <span class="string">"小时"</span> </span><br><span class="line">+ time.getMinutes() + <span class="string">"分"</span> + time.getSeconds() + <span class="string">"秒"</span>; </span><br><span class="line"><span class="comment">// 博客存活了11天 21小时28分51秒 1527868800000当时的时间转的时间戳 new Date(1527868800000).toLocaleString() "2018/6/2 上午12:00:00"</span></span><br></pre></td></tr></table></figure>
<h3 id="Date原型扩展方法"><a href="#Date原型扩展方法" class="headerlink" title="Date原型扩展方法"></a>Date原型扩展方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Date</span>.prototype.format = <span class="function"><span class="keyword">function</span> (<span class="params">format</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">var</span> o = &#123;</span><br><span class="line">					<span class="string">"M+"</span>: <span class="keyword">this</span>.getMonth() + <span class="number">1</span>,</span><br><span class="line">					<span class="string">"d+"</span>: <span class="keyword">this</span>.getDate(),</span><br><span class="line">					<span class="string">"h+"</span>: <span class="keyword">this</span>.getHours(),</span><br><span class="line">					<span class="string">"m+"</span>: <span class="keyword">this</span>.getMinutes(),</span><br><span class="line">					<span class="string">"s+"</span>: <span class="keyword">this</span>.getSeconds(),</span><br><span class="line">					<span class="string">"q+"</span>: <span class="built_in">Math</span>.floor((<span class="keyword">this</span>.getMonth() + <span class="number">3</span>) / <span class="number">3</span>),</span><br><span class="line">					<span class="string">"S"</span>: <span class="keyword">this</span>.getMilliseconds()</span><br><span class="line">			&#125;;</span><br><span class="line">			<span class="keyword">if</span> (<span class="regexp">/(y+)/</span>.test(format)) &#123;</span><br><span class="line">					format = format.replace(<span class="built_in">RegExp</span>.$<span class="number">1</span>, (<span class="keyword">this</span>.getFullYear() + <span class="string">""</span>).substr(<span class="number">4</span> - <span class="built_in">RegExp</span>.$<span class="number">1.</span>length));</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="keyword">for</span> (<span class="keyword">var</span> k <span class="keyword">in</span> o) &#123;</span><br><span class="line">					<span class="keyword">if</span> (<span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">"("</span> + k + <span class="string">")"</span>).test(format)) &#123;</span><br><span class="line">							format = format.replace(<span class="built_in">RegExp</span>.$<span class="number">1</span>, <span class="built_in">RegExp</span>.$<span class="number">1.</span>length == <span class="number">1</span> ? o[k] : (<span class="string">"00"</span> + o[k]).substr((<span class="string">""</span> + o[k]).length));</span><br><span class="line">					&#125;</span><br><span class="line">			&#125;</span><br><span class="line">			<span class="keyword">return</span> format;</span><br><span class="line">	&#125;;</span><br><span class="line"></span><br><span class="line">	<span class="built_in">Date</span>.prototype.addDays = <span class="function"><span class="keyword">function</span> (<span class="params">d</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">this</span>.setDate(<span class="keyword">this</span>.getDate() + d);</span><br><span class="line">	&#125;;</span><br><span class="line"></span><br><span class="line">	<span class="built_in">Date</span>.prototype.addWeeks = <span class="function"><span class="keyword">function</span> (<span class="params">w</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">this</span>.addDays(w * <span class="number">7</span>);</span><br><span class="line">	&#125;;</span><br><span class="line"></span><br><span class="line">	<span class="built_in">Date</span>.prototype.addMonths = <span class="function"><span class="keyword">function</span> (<span class="params">m</span>) </span>&#123;</span><br><span class="line">			<span class="keyword">var</span> d = <span class="keyword">this</span>.getDate();</span><br><span class="line">			<span class="keyword">this</span>.setMonth(<span class="keyword">this</span>.getMonth() + m);</span><br><span class="line">			<span class="comment">//if (this.getDate() &lt; d)</span></span><br><span class="line">			<span class="comment">//  this.setDate(0);</span></span><br><span class="line">	&#125;;</span><br></pre></td></tr></table></figure>
<h2 id="页面加载时间"><a href="#页面加载时间" class="headerlink" title="页面加载时间"></a>页面加载时间</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> loadTime = <span class="built_in">window</span>.performance.timing.domContentLoadedEventEnd-<span class="built_in">window</span>.performance.timing.navigationStart; </span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'Page load time is '</span>+ loadTime);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// DOMContentLoad是HTML文档被加载和解析完成后触发</span></span><br></pre></td></tr></table></figure>
<p>onload和onready的区别：</p>
<ol>
<li>执行时间</li>
</ol>
<p>　　window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 </p>
<p>　　$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。</p>
<ol>
<li>编写个数不同</li>
</ol>
<p>　　window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个。</p>
<p>　　$(document).ready()可以同时编写多个，并且都可以得到执行。</p>
<ol>
<li>简化写法</li>
</ol>
<p>　　window.onload没有简化写法。</p>
<p>　　$(document).ready(function(){})可以简写成$(function(){});</p>
<h2 id="常用标签"><a href="#常用标签" class="headerlink" title="常用标签"></a>常用标签</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta charset=<span class="string">"utf-8"</span>&gt;</span><br><span class="line">&lt;meta content=<span class="string">"text/html; charset=utf-8"</span> http-equiv=<span class="string">"Content-Type"</span>&gt;</span><br><span class="line">&lt;meta name=<span class="string">"viewport"</span> content=<span class="string">"width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"</span>&gt;</span><br><span class="line">&lt;link rel=<span class="string">"shortcut icon"</span> href=<span class="string">"favicon.ico"</span> type=<span class="string">"image/x-icon"</span> /&gt;</span><br><span class="line"><span class="comment">// seo</span></span><br><span class="line">&lt;title&gt;<span class="xml"><span class="tag">&lt;/<span class="name">title</span>&gt;</span></span></span><br><span class="line">&lt;meta name=<span class="string">"author"</span> name=<span class="string">"cosyer"</span>&gt;</span><br><span class="line">&lt;meta name=<span class="string">"keywords"</span> name=<span class="string">"cosyer"</span>&gt;</span><br><span class="line">&lt;meta name=<span class="string">"description"</span> name=<span class="string">"cosyer"</span>&gt;</span><br><span class="line">&lt;link rel=<span class="string">"stylesheet"</span> href=<span class="string">""</span>&gt;</span><br><span class="line">&lt;script src=<span class="string">""</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h2 id="获取url参数"><a href="#获取url参数" class="headerlink" title="获取url参数"></a>获取url参数</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> reg = <span class="keyword">new</span> <span class="built_in">RegExp</span>(<span class="string">"(^|&amp;)"</span> + name + <span class="string">"=([^&amp;]*)(&amp;|$)"</span>)</span><br><span class="line"><span class="keyword">let</span> r = <span class="built_in">window</span>.location.search.substr(<span class="number">1</span>).match(reg)</span><br><span class="line"><span class="keyword">if</span> (r != <span class="literal">null</span>) <span class="keyword">return</span> <span class="built_in">decodeURIComponent</span>(r[<span class="number">2</span>]) <span class="comment">// encodeURIComponent()</span></span><br><span class="line"><span class="keyword">return</span> <span class="literal">null</span></span><br></pre></td></tr></table></figure>
<h2 id="String原型方法扩展"><a href="#String原型方法扩展" class="headerlink" title="String原型方法扩展"></a>String原型方法扩展</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 连字符转驼峰</span></span><br><span class="line"><span class="built_in">String</span>.prototype.hyphenToHump = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="keyword">this</span>.replace(<span class="regexp">/-(\w)/g</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">				<span class="keyword">return</span> <span class="built_in">arguments</span>[<span class="number">1</span>].toUpperCase()</span><br><span class="line">		&#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 连字符转驼峰 简单版本</span></span><br><span class="line"><span class="comment">// 假设分隔符有_和-两种</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">camel</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">let</span> cut = [<span class="string">'_'</span>, <span class="string">'-'</span>];</span><br><span class="line">  <span class="keyword">let</span> ar = str.split(<span class="string">''</span>);</span><br><span class="line">  <span class="keyword">let</span> l = ar.length;</span><br><span class="line">  <span class="keyword">let</span> flag = <span class="literal">false</span>;</span><br><span class="line">  <span class="keyword">for</span>(<span class="keyword">let</span> i = <span class="number">0</span>;i &lt; l;i++) &#123;</span><br><span class="line">    <span class="keyword">let</span> cur = ar[i];</span><br><span class="line">    <span class="keyword">if</span>(cut.indexOf(cur) !== <span class="number">-1</span>) &#123;</span><br><span class="line">      ar[i] = <span class="string">''</span>;</span><br><span class="line">      flag = <span class="literal">true</span>;</span><br><span class="line">    &#125; <span class="keyword">else</span> <span class="keyword">if</span>(flag) &#123;</span><br><span class="line">      ar[i] = ar[i].toUpperCase();</span><br><span class="line">      flag = <span class="literal">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> ar.join(<span class="string">''</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 驼峰转连字符</span></span><br><span class="line"><span class="built_in">String</span>.prototype.humpToHyphen = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">		<span class="keyword">return</span> <span class="keyword">this</span>.replace(<span class="regexp">/([A-Z])/g</span>, <span class="string">"-$1"</span>).toLowerCase()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="拦截控制台、右键和F12"><a href="#拦截控制台、右键和F12" class="headerlink" title="拦截控制台、右键和F12"></a>拦截控制台、右键和F12</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">document</span>.onkeydown = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> e = <span class="built_in">window</span>.event || <span class="built_in">arguments</span>[<span class="number">0</span>];</span><br><span class="line">        <span class="comment">//屏蔽F12</span></span><br><span class="line">        <span class="keyword">if</span> (e.keyCode == <span class="number">123</span>) &#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">                <span class="comment">//屏蔽Ctrl+Shift+I</span></span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> ((e.ctrlKey) &amp;&amp; (e.shiftKey) &amp;&amp; (e.keyCode == <span class="number">73</span>)) &#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">                <span class="comment">//屏蔽Shift+F10</span></span><br><span class="line">        &#125; <span class="keyword">else</span> <span class="keyword">if</span> ((e.shiftKey) &amp;&amp; (e.keyCode == <span class="number">121</span>)) &#123;</span><br><span class="line">                <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">        &#125;</span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">//屏蔽右键单击</span></span><br><span class="line"><span class="built_in">document</span>.oncontextmenu = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="literal">false</span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h2 id="崩溃欺骗"><a href="#崩溃欺骗" class="headerlink" title="崩溃欺骗"></a>崩溃欺骗</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> OriginTitle = <span class="built_in">document</span>.title;</span><br><span class="line"><span class="keyword">var</span> titleTime;</span><br><span class="line"><span class="built_in">document</span>.addEventListener(<span class="string">'visibilitychange'</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">document</span>.hidden) &#123;</span><br><span class="line">        $(<span class="string">'[rel="icon"]'</span>).attr(<span class="string">'href'</span>, <span class="string">"/img/TEP.ico"</span>);</span><br><span class="line">        <span class="built_in">document</span>.title = <span class="string">'╭(°A°`)╮ 页面崩溃啦 ~'</span>;</span><br><span class="line">        clearTimeout(titleTime);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">else</span> &#123;</span><br><span class="line">        $(<span class="string">'[rel="icon"]'</span>).attr(<span class="string">'href'</span>, <span class="string">"/favicon.ico"</span>);</span><br><span class="line">        <span class="built_in">document</span>.title = <span class="string">'(ฅ&gt;ω&lt;*ฅ) 噫又好了~'</span> + OriginTitle;</span><br><span class="line">        titleTime = setTimeout(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="built_in">document</span>.title = OriginTitle;</span><br><span class="line">        &#125;, <span class="number">2000</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="a标签"><a href="#a标签" class="headerlink" title="a标签"></a>a标签</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">   <span class="comment">// 邮件</span></span><br><span class="line">&lt;a href=&#123;<span class="string">'mailto:'</span>+props.email&#125;&gt;<span class="xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="comment">// 下载只有 Firefox 和 Chrome 支持 download 属性。</span></span><br><span class="line">&lt;a href=<span class="string">"/images/myw3schoolimage.jpg"</span> download=<span class="string">"w3logo"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line">   <span class="comment">// QQ</span></span><br><span class="line">&lt;a href=<span class="string">"tencent://message/?uin=535509852&amp;Site=-&amp;Menu=yes"</span> target=<span class="string">"_blank"</span>&gt;QQ:<span class="number">535509852</span>&lt;<span class="regexp">/a&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="lt-script-gt-元素放在-HTML-文件底部"><a href="#lt-script-gt-元素放在-HTML-文件底部" class="headerlink" title="&lt;script&gt;元素放在 HTML 文件底部"></a><code>&lt;script&gt;</code>元素放在 HTML 文件底部</h2><p>我们将 <code>&lt;script&gt;</code>元素放在 HTML 文件底部的原因是，浏览器按照代码在文件中的顺序解析 HTML。如果 JavaScript在最前面被加载，HTML还未加载，JavaScript将无法作用于HTML，所以JavaScript无效，如果 JavaScript 代码出现问题则 HTML 不会被加载。所以将 JavaScript 代码放在底部是最好的选择。</p>
<h2 id="某个字符在字符串中的个数"><a href="#某个字符在字符串中的个数" class="headerlink" title="某个字符在字符串中的个数"></a>某个字符在字符串中的个数</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> str=<span class="string">"11112234241"</span></span><br><span class="line"><span class="built_in">console</span>.log(str.split(<span class="string">"1"</span>).length<span class="number">-1</span>)</span><br></pre></td></tr></table></figure>
<h2 id="数组求最大值方法汇总"><a href="#数组求最大值方法汇总" class="headerlink" title="数组求最大值方法汇总"></a>数组求最大值方法汇总</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span> es6拓展运算符...</span><br><span class="line"><span class="built_in">Math</span>.max(...arr)</span><br><span class="line"><span class="number">2.</span> es5 apply(与方法<span class="number">1</span>原理相同)</span><br><span class="line"><span class="built_in">Math</span>.max.apply(<span class="literal">null</span>,arr)</span><br><span class="line"><span class="number">3.</span> <span class="keyword">for</span>循环</span><br><span class="line"><span class="keyword">let</span> max = arr[<span class="number">0</span>];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> i = <span class="number">0</span>; i &lt; arr.length - <span class="number">1</span>; i++) &#123;</span><br><span class="line">    max = max &lt; arr[i+<span class="number">1</span>] ? arr[i+<span class="number">1</span>] : max</span><br><span class="line">&#125;</span><br><span class="line"><span class="number">4.</span> 数组sort</span><br><span class="line">arr.sort(<span class="function">(<span class="params">a,b</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="keyword">return</span> b-a <span class="comment">// 降序</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="number">5.</span> 数组reduce</span><br><span class="line">arr.reduce(<span class="function">(<span class="params">a,b</span>)=&gt;</span>&#123;</span><br><span class="line">	<span class="keyword">return</span> a&gt;b?a:b</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">p1,p2</span>) </span>&#123;</span><br><span class="line"><span class="keyword">this</span>.val = p1 + p2;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> bar = foo.bind( <span class="literal">null</span>, <span class="string">"p1"</span> );</span><br><span class="line"><span class="keyword">var</span> baz = <span class="keyword">new</span> bar( <span class="string">"p2"</span> );</span><br><span class="line">baz.val; <span class="comment">// p1p2</span></span><br></pre></td></tr></table></figure>
<h2 id="回到顶部"><a href="#回到顶部" class="headerlink" title="回到顶部"></a>回到顶部</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">goback</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line"><span class="comment">// 1.回到顶部</span></span><br><span class="line"><span class="comment">// scrollTo(0, 0); // 滚动条滚动 x y </span></span><br><span class="line"><span class="comment">// 2.渐渐回到顶部 距离顶部高度</span></span><br><span class="line"><span class="comment">//var iScrollTop = document.body.scrollTop; //360,Chrome,</span></span><br><span class="line"><span class="comment">//var iScrollTop = document.documentElement.scrollTop;  //IE8,火狐</span></span><br><span class="line">    <span class="keyword">var</span> iScrollTop = <span class="built_in">document</span>.body.scrollTop || <span class="built_in">document</span>.documentElement.scrollTop;</span><br><span class="line">    <span class="keyword">var</span> timer = setInterval(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;  <span class="comment">//定时器</span></span><br><span class="line">        scrollTo(<span class="number">0</span>, iScrollTop -= <span class="number">100</span>);</span><br><span class="line">        <span class="built_in">console</span>.log(iScrollTop);</span><br><span class="line">        <span class="keyword">if</span> (iScrollTop &lt;= <span class="number">0</span>) &#123;</span><br><span class="line">            clearInterval(timer);  <span class="comment">//清除定时器</span></span><br><span class="line">        &#125;</span><br><span class="line">    &#125;, <span class="number">100</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="手机号处理中间4位替换成-数据脱敏"><a href="#手机号处理中间4位替换成-数据脱敏" class="headerlink" title="手机号处理中间4位替换成*(数据脱敏)"></a>手机号处理中间4位替换成*(数据脱敏)</h2><h3 id="方法1-substr方法"><a href="#方法1-substr方法" class="headerlink" title="方法1 substr方法"></a>方法1 substr方法</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> phone=<span class="string">"18883269663"</span></span><br><span class="line"><span class="keyword">let</span> phone1=phone.substr(<span class="number">0</span>,<span class="number">3</span>)+<span class="string">"****"</span>+phone.substr(<span class="number">7</span>)</span><br></pre></td></tr></table></figure>
<h3 id="方法2-正则匹配分组"><a href="#方法2-正则匹配分组" class="headerlink" title="方法2 正则匹配分组"></a>方法2 正则匹配分组</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> tel = <span class="string">"13122223333"</span>;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> reg = <span class="regexp">/^(\d&#123;3&#125;)\d&#123;4&#125;(\d&#123;4&#125;)$/</span>;</span><br><span class="line"></span><br><span class="line">tel = tel.replace(reg, <span class="string">"$1****$2"</span>);</span><br></pre></td></tr></table></figure>
<h2 id="转换树形结构数据"><a href="#转换树形结构数据" class="headerlink" title="转换树形结构数据"></a>转换树形结构数据</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> arr=[&#123;<span class="string">"departmentId"</span>:<span class="string">"2807369902638080"</span>,<span class="string">"departmentName"</span>:<span class="string">"四合院大数据有限公司"</span>,<span class="string">"departmentDesc"</span>:<span class="string">"四合院大数据有限公司是非常好的公司"</span>,<span class="string">"createTime"</span>:<span class="literal">null</span>,<span class="string">"hasChild"</span>:<span class="literal">false</span>,<span class="string">"parentId"</span>:<span class="literal">null</span>&#125;,&#123;<span class="string">"departmentId"</span>:<span class="string">"2805950137730048"</span>,<span class="string">"departmentName"</span>:<span class="string">"产品策划部"</span>,<span class="string">"departmentDesc"</span>:<span class="literal">null</span>,<span class="string">"createTime"</span>:<span class="literal">null</span>,<span class="string">"hasChild"</span>:<span class="literal">true</span>,<span class="string">"parentId"</span>:<span class="literal">null</span>&#125;,&#123;<span class="string">"departmentId"</span>:<span class="string">"2805949110338560"</span>,<span class="string">"departmentName"</span>:<span class="string">"研发中心"</span>,<span class="string">"departmentDesc"</span>:<span class="literal">null</span>,<span class="string">"createTime"</span>:<span class="literal">null</span>,<span class="string">"hasChild"</span>:<span class="literal">true</span>,<span class="string">"parentId"</span>:<span class="literal">null</span>&#125;];</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params">data, p_id</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> result = [],</span><br><span class="line">    temp;</span><br><span class="line">  <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; data.length; i++) &#123;</span><br><span class="line">    <span class="keyword">if</span> (data[i].parentId == p_id) &#123;</span><br><span class="line">      <span class="keyword">var</span> obj = data[i];</span><br><span class="line">      obj.label = data[i].departmentName;</span><br><span class="line">      temp = fn(data, data[i].departmentId);</span><br><span class="line">      <span class="keyword">if</span> (temp.length &gt; <span class="number">0</span>) &#123;</span><br><span class="line">        obj.children = temp;</span><br><span class="line">      &#125;</span><br><span class="line">      result.push(obj);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> treeData=fn(treeData,<span class="literal">null</span>) <span class="comment">// 传入原始数据/parentId</span></span><br><span class="line">适用于ant design和element-ui等树形结构数据</span><br></pre></td></tr></table></figure>
<h2 id="浏览器返回上一页"><a href="#浏览器返回上一页" class="headerlink" title="浏览器返回上一页"></a>浏览器返回上一页</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;a href=<span class="string">"#"</span> onclick=<span class="string">"javascript:history.back(-1);"</span>&gt;返回到上一页&lt;<span class="regexp">/a&gt;</span></span><br><span class="line"><span class="regexp"></span></span><br><span class="line"><span class="regexp">&lt;a href="#" onClick="javascript:history.go(-1)"&gt;返回上一页&lt;/</span>a&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// window.open(url,"_blank")</span></span><br><span class="line"><span class="comment">// window.location.href=url</span></span><br><span class="line"><span class="comment">// window.location.replace(url)</span></span><br></pre></td></tr></table></figure>
<h2 id="浏览器前进后退"><a href="#浏览器前进后退" class="headerlink" title="浏览器前进后退"></a>浏览器前进后退</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">history.forward();<span class="comment">//前进</span></span><br><span class="line">history.back();<span class="comment">//后退+刷新</span></span><br><span class="line">history.back(<span class="number">-1</span>)<span class="comment">//后退,直接返回当前页的上一页，数据全部消息，是个新页面</span></span><br><span class="line">history.go(<span class="number">1</span>);<span class="comment">//前进</span></span><br><span class="line">history.go(<span class="number">-1</span>);<span class="comment">//后退也是返回当前页的上一页，不过表单里的数据全部还在</span></span><br></pre></td></tr></table></figure>
<h2 id="去重数组里对象相同值得key"><a href="#去重数组里对象相同值得key" class="headerlink" title="去重数组里对象相同值得key"></a>去重数组里对象相同值得key</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> key = <span class="string">'id'</span></span><br><span class="line"><span class="keyword">const</span> arr = [&#123; <span class="attr">id</span>: <span class="number">1</span> &#125;, &#123; <span class="attr">id</span>: <span class="number">1</span> &#125;, &#123; <span class="attr">id</span>: <span class="number">2</span> &#125;, &#123; <span class="attr">id</span>: <span class="number">3</span> &#125;]</span><br><span class="line"><span class="keyword">const</span> filted = arr.reduce(<span class="function">(<span class="params">finalList, obj</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">if</span> (!finalList.find(<span class="function"><span class="params">T</span> =&gt;</span> T[key] === obj[key])) &#123;</span><br><span class="line">    finalList.push(obj)</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> finalList</span><br><span class="line">&#125;, [])</span><br><span class="line"><span class="comment">// [&#123; id: 1 &#125;, &#123; id: 2 &#125;, &#123; id: 3 &#125;]</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">let</span> map =<span class="keyword">new</span> <span class="built_in">Map</span>()</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> item <span class="keyword">of</span> arr)&#123;</span><br><span class="line">map.set(item[key],item)</span><br><span class="line">&#125;</span><br><span class="line">[...map.values()]</span><br></pre></td></tr></table></figure>
<h2 id="变量声明"><a href="#变量声明" class="headerlink" title="变量声明"></a>变量声明</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">      <span class="keyword">var</span> a = b = <span class="number">5</span>; <span class="comment">// var a=b;b=5 严格模式会报错</span></span><br><span class="line">  &#125;)();   </span><br><span class="line"><span class="built_in">console</span>.log(b); <span class="comment">// 5</span></span><br><span class="line"><span class="built_in">console</span>.log(a); <span class="comment">// Uncaught ReferenceError: a is not defined</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> a=[]; a[<span class="number">0</span>]=<span class="number">1</span>; a[<span class="number">1</span>]=<span class="number">2</span>; a[<span class="number">2</span>]=<span class="number">3</span>; a[<span class="number">5</span>]=<span class="number">4</span>; </span><br><span class="line">a.length <span class="comment">// 6</span></span><br><span class="line"><span class="keyword">while</span>不改变作用域链</span><br><span class="line">[]?<span class="literal">true</span>:<span class="literal">false</span> <span class="comment">// true</span></span><br><span class="line">[]==<span class="literal">false</span>?<span class="literal">true</span>:<span class="literal">false</span> <span class="comment">// true</span></span><br><span class="line"><span class="number">2</span>==<span class="literal">true</span> <span class="comment">//false</span></span><br><span class="line"><span class="number">2</span>==<span class="literal">false</span> <span class="comment">// false</span></span><br><span class="line"></span><br><span class="line">+<span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">017</span>) <span class="comment">// NaN</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>) <span class="comment">// [1,2,3]</span></span><br><span class="line"><span class="keyword">new</span> <span class="built_in">Array</span>(<span class="number">1</span>) <span class="comment">// [empty]</span></span><br><span class="line"><span class="built_in">Array</span>.of(<span class="number">7</span>) <span class="comment">// [7]</span></span><br></pre></td></tr></table></figure>
<h2 id="with语句"><a href="#with语句" class="headerlink" title="with语句"></a>with语句</h2><p>with语句的作用是将代码的作用域设置到一个特定的对象中。</p>
<p>利：with语句可以在不造成性能损失的情况下，减少变量的长度。很多情况下，也可以不使用with语句，而是使用一个临时变量来保存指针，来达到同样的效果。</p>
<p>弊：with语句使得程序在查找该语句块中的所有的变量值时，都是先在该with语句指定的对象下面先寻找一遍，然后再去外面的作用域去寻找。所以尽量不要在该语句块中去使用一些不属于该对象中的变量</p>
<p>用法</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = &#123;</span><br><span class="line">  name : <span class="string">"古朋"</span>,</span><br><span class="line">  nick_name : <span class="string">"gupeng"</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="keyword">with</span>(x)&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(name+<span class="string">'的小名是'</span>+nick_name);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>相当于</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = &#123;</span><br><span class="line">  name : <span class="string">"古朋"</span>,</span><br><span class="line">  nick_name : <span class="string">"gupeng"</span></span><br><span class="line">&#125;;</span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> *这里将x对象赋值到当前局部变量中，减少不必要的指针路径解析运算</span></span><br><span class="line"><span class="comment"> *一般用于在在方法中将this对象局部化，比如：var this_ = this;</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"><span class="keyword">var</span> x_ = x;</span><br><span class="line"><span class="built_in">console</span>.log(x_.name+<span class="string">'的小名是'</span>+x_nick_name);</span><br></pre></td></tr></table></figure>
<h2 id="boolean类型在进行比较时会类型转换成number"><a href="#boolean类型在进行比较时会类型转换成number" class="headerlink" title="boolean类型在进行比较时会类型转换成number"></a>boolean类型在进行比较时会类型转换成number</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">11</span>==<span class="literal">true</span> <span class="comment">// 11==1 false</span></span><br><span class="line"><span class="number">1</span>==<span class="literal">true</span>  <span class="comment">// 1==1 true</span></span><br></pre></td></tr></table></figure>
<h2 id="RGB到十六进制"><a href="#RGB到十六进制" class="headerlink" title="RGB到十六进制"></a>RGB到十六进制</h2><p>使用按位左移运算符(&lt;&lt;)和toString(16)，然后padStart(6,’0’)将给定的RGB参数转换为十六进制字符串以获得6位十六进制值。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> rgbToHex = <span class="function">(<span class="params">r, g, b</span>) =&gt;</span> ((r &lt;&lt; <span class="number">16</span>) + (g &lt;&lt; <span class="number">8</span>) + b).toString(<span class="number">16</span>).padStart(<span class="number">6</span>, <span class="string">'0'</span>);</span><br><span class="line"><span class="comment">// ((1&lt;&lt;24) + (rgb.r&lt;&lt;16) + (rgb.g&lt;&lt;8) + rgb.b).toString(16).substr(1);</span></span><br><span class="line"><span class="comment">// rgbToHex(255, 165, 1) -&gt; 'ffa501'</span></span><br></pre></td></tr></table></figure>
<h2 id="滚动到顶部"><a href="#滚动到顶部" class="headerlink" title="滚动到顶部"></a>滚动到顶部</h2><p>使用document.documentElement.scrollTop或document.body.scrollTop获取到顶部的距离。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> scrollToTop = <span class="function"><span class="params">_</span> =&gt;</span> &#123;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">const</span> c = <span class="built_in">document</span>.documentElement.scrollTop || <span class="built_in">document</span>.body.scrollTop;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (c &gt; <span class="number">0</span>) &#123;</span><br><span class="line"></span><br><span class="line">    ​ <span class="built_in">window</span>.requestAnimationFrame(scrollToTop);</span><br><span class="line"></span><br><span class="line">    ​ <span class="built_in">window</span>.scrollTo(<span class="number">0</span>, c - c / <span class="number">8</span>);</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// scrollToTop()</span></span><br></pre></td></tr></table></figure>
<h2 id="求和"><a href="#求和" class="headerlink" title="求和"></a>求和</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> sum = <span class="function"><span class="params">arr</span> =&gt;</span> arr.reduce(<span class="function">(<span class="params">acc, val</span>) =&gt;</span> acc + val, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// sum([1,2,3,4]) -&gt; 10 累加器</span></span><br><span class="line"><span class="comment">// 平均数 sum([1,2,3,4])/4</span></span><br></pre></td></tr></table></figure>
<h2 id="大写每个单词的首字母"><a href="#大写每个单词的首字母" class="headerlink" title="大写每个单词的首字母"></a>大写每个单词的首字母</h2><p>使用replace()匹配每个单词的第一个字符，并使用toUpperCase()来将其大写。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> capitalizeEveryWord = <span class="function"><span class="params">str</span> =&gt;</span> str.replace(<span class="regexp">/[a-z]/g</span>, char =&gt; char.toUpperCase());</span><br><span class="line"><span class="comment">// capitalizeEveryWord('hello world!') -&gt; 'HELLO WORLD!'</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">titleCase</span>(<span class="params">s</span>) </span>&#123;  </span><br><span class="line">    <span class="keyword">return</span> s.toLowerCase().replace(<span class="regexp">/\b([\w|']+)\b/g</span>, <span class="function"><span class="keyword">function</span>(<span class="params">word</span>) </span>&#123;  </span><br><span class="line">        <span class="comment">//return word.slice(0, 1).toUpperCase() + word.slice(1);  </span></span><br><span class="line">        <span class="keyword">return</span> word.replace(word.charAt(<span class="number">0</span>), word.charAt(<span class="number">0</span>).toUpperCase());  </span><br><span class="line">    &#125;);  </span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// titleCase('hello world!') -&gt; 'Hello World!'</span></span><br></pre></td></tr></table></figure>
<h2 id="计算数组中某值出现的次数"><a href="#计算数组中某值出现的次数" class="headerlink" title="计算数组中某值出现的次数"></a>计算数组中某值出现的次数</h2><p>每次遇到数组中的特定值时，使用reduce()来递增计数器。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> countOccurrences = <span class="function">(<span class="params">arr, value</span>) =&gt;</span> arr.reduce(<span class="function">(<span class="params">a, v</span>) =&gt;</span> v === value ? a + <span class="number">1</span> : a + <span class="number">0</span>, <span class="number">0</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// countOccurrences([1,1,2,1,2,3], 1) -&gt; 3</span></span><br></pre></td></tr></table></figure>
<h2 id="数组间的区别"><a href="#数组间的区别" class="headerlink" title="数组间的区别"></a>数组间的区别</h2><p>从b创建一个Set，然后在a上使用Array.filter()，只保留b中不包含的值。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> difference = <span class="function">(<span class="params">a, b</span>) =&gt;</span> &#123; <span class="keyword">const</span> s = <span class="keyword">new</span> <span class="built_in">Set</span>(b); <span class="keyword">return</span> a.filter(<span class="function"><span class="params">x</span> =&gt;</span> !s.has(x)); &#125;;</span><br><span class="line"></span><br><span class="line"><span class="comment">// difference([1,2,3], [1,2]) -&gt; [3]</span></span><br></pre></td></tr></table></figure>
<h2 id="阶乘-1"><a href="#阶乘-1" class="headerlink" title="阶乘"></a>阶乘</h2><p>使用递归。如果n小于或等于1，则返回1。否则返回n和n - 1的阶乘的乘积。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> factorial = <span class="function"><span class="params">n</span> =&gt;</span> n &lt;= <span class="number">1</span> ? <span class="number">1</span> : n * factorial(n - <span class="number">1</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// factorial(6) -&gt; 720</span></span><br></pre></td></tr></table></figure>
<h2 id="获取滚动位置"><a href="#获取滚动位置" class="headerlink" title="获取滚动位置"></a>获取滚动位置</h2><p>如果已定义，请使用pageXOffset和pageYOffset，否则使用scrollLeft和scrollTop，可以省略el来使用window的默认值。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> getScrollPos = <span class="function">(<span class="params">el = <span class="built_in">window</span></span>) =&gt;</span></span><br><span class="line"></span><br><span class="line">(&#123;<span class="attr">x</span>: (el.pageXOffset !== <span class="literal">undefined</span>) ? el.pageXOffset : el.scrollLeft,</span><br><span class="line">y: (el.pageYOffset !== <span class="literal">undefined</span>) ? el.pageYOffset : el.scrollTop&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// getScrollPos() -&gt; &#123;x: 0, y: 200&#125;</span></span><br></pre></td></tr></table></figure>
<h2 id="最大公约数"><a href="#最大公约数" class="headerlink" title="最大公约数"></a>最大公约数</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> gcd = <span class="function">(<span class="params">x, y</span>) =&gt;</span> !y ? x : gcd(y, x % y);</span><br><span class="line"></span><br><span class="line"><span class="comment">// gcd (8, 36) -&gt; 4</span></span><br><span class="line"><span class="number">1e3</span> <span class="comment">// 1000</span></span><br><span class="line"><span class="number">1E3</span> <span class="comment">// 1000</span></span><br></pre></td></tr></table></figure>
<h2 id="UUID生成器"><a href="#UUID生成器" class="headerlink" title="UUID生成器"></a>UUID生成器</h2><p>使用crypto API生成符合RFC4122版本4的UUID。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> uuid = <span class="function"><span class="params">_</span> =&gt;</span></span><br><span class="line">([<span class="number">1e7</span>] + <span class="number">-1e3</span> + <span class="number">-4e3</span> + <span class="number">-8e3</span> + <span class="number">-1e11</span>).replace(<span class="regexp">/[018]/g</span>, c =&gt; (c ^ crypto.getRandomValues(<span class="keyword">new</span> <span class="built_in">Uint8Array</span>(<span class="number">1</span>))[<span class="number">0</span>] &amp; <span class="number">15</span> &gt;&gt; c / <span class="number">4</span>).toString(<span class="number">16</span>));</span><br><span class="line"></span><br><span class="line"><span class="comment">// uuid() -&gt; '7982fcfe-5721-4632-bede-6000885be57d'</span></span><br></pre></td></tr></table></figure>
<h2 id="检查变量是否声明"><a href="#检查变量是否声明" class="headerlink" title="检查变量是否声明"></a>检查变量是否声明</h2><p>如果读取一个不存在的键，会返回undefined，而不是报错。可以利用这一点，来检查一个全局变量是否被声明。
前二种写法有漏洞，如果a属性是一个空字符串（或其他对应的布尔值为false的情况），则无法起到检查变量是否声明的作用。
最好的方法是使用in</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 假设变量x未定义</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 写法一：报错</span></span><br><span class="line"><span class="keyword">if</span> (x) &#123; <span class="keyword">return</span> <span class="number">1</span>; &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 写法二：不正确</span></span><br><span class="line"><span class="keyword">if</span> (<span class="built_in">window</span>.x) &#123; <span class="keyword">return</span> <span class="number">1</span>; &#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 写法三：正确</span></span><br><span class="line"><span class="keyword">if</span> (<span class="string">'x'</span> <span class="keyword">in</span> <span class="built_in">window</span>) &#123; <span class="keyword">return</span> <span class="number">1</span>; &#125;</span><br></pre></td></tr></table></figure>
<h2 id="使用对象结构代替-switch…case"><a href="#使用对象结构代替-switch…case" class="headerlink" title="使用对象结构代替 switch…case"></a>使用对象结构代替 switch…case</h2><p>switch…case不使用大括号，不利于代码形式的统一。此外，这种结构类似于goto语句，容易造成程序流程的混乱，使得代码结构混乱不堪，不符合面向对象编程的原则。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 反模式</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doAction</span>(<span class="params">action</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">switch</span> (action) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'hack'</span>:</span><br><span class="line">            <span class="comment">// ...</span></span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'slash'</span>:</span><br><span class="line">            <span class="comment">// ...</span></span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">default</span>:</span><br><span class="line">            <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'Invalid action.'</span>);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 好模式</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">doAction</span>(<span class="params">action</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> actions = &#123;</span><br><span class="line">        hack: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="comment">// ...</span></span><br><span class="line">        &#125;,</span><br><span class="line">        slash: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">            <span class="comment">// ...</span></span><br><span class="line">        &#125;,</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> actions[action] !== <span class="string">'function'</span>) &#123;</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'Invalid action.'</span>);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> actions[action]();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="隐藏console打印在哪一行的信息"><a href="#隐藏console打印在哪一行的信息" class="headerlink" title="隐藏console打印在哪一行的信息"></a>隐藏console打印在哪一行的信息</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">setTimeout(<span class="built_in">console</span>.log.bind(<span class="built_in">console</span>, <span class="string">'Hello world'</span>), <span class="number">2000</span>)</span><br></pre></td></tr></table></figure>
<h2 id="手机震动"><a href="#手机震动" class="headerlink" title="手机震动"></a>手机震动</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.navigator.vibrate(<span class="number">200</span>); <span class="comment">// vibrate for 200ms</span></span><br></pre></td></tr></table></figure>
<h2 id="1-2-11-用sort方法进行排序"><a href="#1-2-11-用sort方法进行排序" class="headerlink" title="[1,2,11]用sort方法进行排序"></a>[1,2,11]用sort方法进行排序</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">11</span>].sort() <span class="comment">// [1,11,2] sort方法默认根据unicode进行排序</span></span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>,<span class="literal">undefined</span>,<span class="literal">null</span>].sort() <span class="comment">// [1, null, undefined]</span></span><br><span class="line"></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">11</span>].sort(<span class="function">(<span class="params">a,b</span>)=&gt;</span>a-b)  <span class="comment">// [1,2,11]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// bind是函数柯里化得一种实现</span></span><br></pre></td></tr></table></figure>
<h2 id="1-2-3-map-parseInt"><a href="#1-2-3-map-parseInt" class="headerlink" title="[1,2,3].map(parseInt)"></a>[1,2,3].map(parseInt)</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].map(<span class="built_in">parseInt</span>) <span class="comment">// [1,NaN,NaN] 这里第二个参数是map的index，3对应下标2，3没有二进制的。</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="string">"11"</span>,<span class="number">2</span>);		<span class="comment">//返回 3 (2+1)</span></span><br></pre></td></tr></table></figure>
<p>parseInt第二个参数    </p>
<blockquote>
<p>可选。表示要解析的数字的基数。该值介于 2 ~ 36 之间。</p>
</blockquote>
<blockquote>
<p>如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 “0x” 或 “0X” 开头，将以 16 为基数。</p>
</blockquote>
<blockquote>
<p>如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。</p>
</blockquote>
<h2 id="图片上传"><a href="#图片上传" class="headerlink" title="图片上传"></a>图片上传</h2><ol>
<li><p>传统的form表单上传</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;form action=<span class="string">""</span> method=<span class="string">"POST"</span> enctype=<span class="string">"multipart/form-data"</span>&gt;</span><br><span class="line">    &lt;input type=<span class="string">"file"</span> name=<span class="string">"img"</span>&gt;</span><br><span class="line">&lt;<span class="regexp">/form&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>隐藏iframe模拟Ajax上传</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// form的enctype属性为编码方式，常用有两种：application/x-www-form-urlencoded和multipart/form-data，默认为application/x-www-form-urlencoded。</span></span><br><span class="line"><span class="comment">// multipart/form-data是上传二进制数据;它告诉我们传输的数据要用到多媒体传输协议</span></span><br><span class="line">&lt;iframe  name=<span class="string">"ajaxUpload"</span> style=<span class="string">"display:none"</span>&gt;<span class="xml"><span class="tag">&lt;/<span class="name">iframe</span>&gt;</span></span></span><br><span class="line">&lt;form action=<span class="string">"url"</span> method=<span class="string">"post"</span> enctype=<span class="string">"multipart/form-data"</span> target=<span class="string">"ajaxUpload"</span>&gt;</span><br><span class="line">    &lt;input type=<span class="string">"file"</span> name=<span class="string">"img"</span>&gt;</span><br><span class="line">&lt;<span class="regexp">/form&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>h5 ajax上传</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 使用已有的form表单，来实例化FormData对象</span></span><br><span class="line"><span class="keyword">var</span> form = <span class="built_in">document</span>.getElementById(<span class="string">'form'</span>);</span><br><span class="line"><span class="keyword">var</span> formData = <span class="keyword">new</span> FormData(form);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 可以使用append来添加更多的信息</span></span><br><span class="line"><span class="keyword">var</span> img = <span class="built_in">document</span>.getElementById(<span class="string">'img'</span>).files[<span class="number">0</span>];</span><br><span class="line"><span class="keyword">var</span> formData = <span class="keyword">new</span> FormData();</span><br><span class="line">formData.append(<span class="string">'img'</span>,img);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取 </span></span><br><span class="line"><span class="comment">// formData.get('img') formData.getAll('img') [img]</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 设置修改</span></span><br><span class="line"><span class="comment">// formData.set('img',1) // 已存在则修改，不存在则新增</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断是否存在</span></span><br><span class="line"><span class="comment">// formData.has('img')</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 删除</span></span><br><span class="line"><span class="comment">// formData.delete('img')</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 返回迭代器</span></span><br><span class="line"><span class="comment">// formData.entries()</span></span><br><span class="line"><span class="comment">// formData.append("k1", "v1");</span></span><br><span class="line"><span class="comment">// formData.append("k1", "v2");</span></span><br><span class="line"><span class="comment">// formData.append("k2", "v1");</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// var i = formData.entries();</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// i.next(); // &#123;done:false, value:["k1", "v1"]&#125;</span></span><br><span class="line"><span class="comment">// i.next(); // &#123;done:fase, value:["k1", "v2"]&#125;</span></span><br><span class="line"><span class="comment">// i.next(); // &#123;done:fase, value:["k2", "v1"]&#125;</span></span><br><span class="line"><span class="comment">// i.next(); // &#123;done:true, value:undefined&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 利用XHR上传图片</span></span><br><span class="line"><span class="keyword">var</span> xhr = <span class="keyword">new</span> XMLHttpRequest();</span><br><span class="line">xhr.open(<span class="string">'POST'</span>,url);</span><br><span class="line">xhr.onreadystatechange = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;;</span><br><span class="line">xhr.send(formData);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取上传的进度</span></span><br><span class="line">xhr.upload.onprogress = <span class="function"><span class="keyword">function</span>(<span class="params">evt</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(evt);</span><br><span class="line">    <span class="keyword">var</span> loaded = evt.loaded; <span class="comment">//已经上传的大小</span></span><br><span class="line">    <span class="keyword">var</span> total = evt.total;<span class="comment">//附件总大小</span></span><br><span class="line">    <span class="keyword">var</span> per = <span class="built_in">Math</span>.floor(<span class="number">100</span> * loaded / total );<span class="comment">//已经上传的百分比</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>检验图片信息</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;input type=<span class="string">"file"</span> id=<span class="string">"img"</span> name=<span class="string">"img"</span>/&gt;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 获取file对象</span></span><br><span class="line"><span class="keyword">var</span> img = <span class="built_in">document</span>.getElementById(<span class="string">'img'</span>);</span><br><span class="line"><span class="keyword">var</span> files = img.files;</span><br><span class="line"><span class="keyword">var</span> file = files[<span class="number">0</span>];</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="实现JSONP"><a href="#实现JSONP" class="headerlink" title="实现JSONP"></a>实现JSONP</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 对象存储</span></span><br><span class="line"><span class="keyword">const</span> JSONP = <span class="function">(<span class="params">url, jsonpObj</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">let</span> cbName = <span class="string">"cb"</span> + JSONP.count++</span><br><span class="line">  <span class="keyword">let</span> cbQuery = <span class="string">"JSONP."</span> + cbName</span><br><span class="line">  <span class="keyword">let</span> paramsToQuery = <span class="function"><span class="params">obj</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">let</span> query = <span class="string">'?'</span></span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> k <span class="keyword">in</span> obj) &#123;</span><br><span class="line">      <span class="keyword">if</span> (obj.hasOwnProperty(k)) &#123;</span><br><span class="line">        query += <span class="string">`<span class="subst">$&#123;k&#125;</span>=<span class="subst">$&#123;obj[k]&#125;</span>&amp;`</span></span><br><span class="line">      &#125;      </span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> query</span><br><span class="line">  &#125;</span><br><span class="line">  JSONP[cbName] = <span class="function"><span class="params">data</span> =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">try</span> &#123;</span><br><span class="line">      jsonpObj.callback(data)</span><br><span class="line">    &#125; <span class="keyword">finally</span> &#123;</span><br><span class="line">      <span class="keyword">delete</span> JSONP[cbName]</span><br><span class="line">      <span class="built_in">document</span>.body.removeChild(script)</span><br><span class="line">    &#125;   </span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">let</span> queryStr = paramsToQuery(jsonpObj.data) + <span class="string">'callback='</span> + cbQuery</span><br><span class="line">  <span class="keyword">let</span> script = <span class="built_in">document</span>.createElement(<span class="string">'script'</span>)</span><br><span class="line">  script.src = url + <span class="built_in">encodeURIComponent</span>(queryStr)</span><br><span class="line">  <span class="built_in">document</span>.body.appendChild(script)</span><br><span class="line">&#125;</span><br><span class="line">JSONP.count = <span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 数组存储</span></span><br><span class="line"><span class="keyword">var</span> JSONP = <span class="function">(<span class="params">url, descriptor</span>) =&gt;</span> &#123;</span><br><span class="line">  <span class="keyword">var</span> script = <span class="built_in">document</span>.createElement(<span class="string">'script'</span>)</span><br><span class="line">  <span class="keyword">var</span> body = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'body'</span>)[<span class="number">0</span>]</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> parseParam = <span class="function">(<span class="params">paramObj</span>) =&gt;</span> &#123;</span><br><span class="line">    <span class="keyword">var</span> paramStr = <span class="string">'?'</span>,</span><br><span class="line">        prop = <span class="string">''</span></span><br><span class="line">    <span class="keyword">for</span> (prop <span class="keyword">in</span> paramObj) &#123;</span><br><span class="line">      <span class="keyword">if</span>(paramObj.hasOwnProperty(prop)) &#123;</span><br><span class="line">        paramStr += (<span class="string">`<span class="subst">$&#123;prop&#125;</span>=<span class="subst">$&#123;<span class="built_in">encodeURIComponent</span>(paramObj[prop])&#125;</span>&amp;`</span>)</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">return</span> paramStr</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">  <span class="keyword">var</span> params = parseParam(descriptor.data)</span><br><span class="line">  <span class="keyword">var</span> callback = <span class="function">(<span class="params">data</span>) =&gt;</span> &#123;</span><br><span class="line">    descriptor.callback(data)</span><br><span class="line">    body.removeChild(script)</span><br><span class="line">    <span class="keyword">delete</span> JSONP.cbs[index]</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">var</span> index = JSONP.cbs.push(callback) - <span class="number">1</span></span><br><span class="line"></span><br><span class="line">  script.src = url + params + <span class="string">'callback='</span> + <span class="built_in">encodeURIComponent</span>(<span class="string">`JSONP.cbs[<span class="subst">$&#123;index&#125;</span>]`</span>)</span><br><span class="line">  body.appendChild(script)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">JSONP.cbs = []</span><br></pre></td></tr></table></figure>
<h2 id="chrome浏览器拦截多次window-open"><a href="#chrome浏览器拦截多次window-open" class="headerlink" title="chrome浏览器拦截多次window.open"></a>chrome浏览器拦截多次window.open</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"> <span class="comment">// 遍历打开页面 chrome浏览器会拦截只允许一次的请求 这里模拟点击</span></span><br><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].forEach(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> aDom = <span class="built_in">document</span>.createElement(<span class="string">'a'</span>);</span><br><span class="line">        aDom.href = <span class="string">'https://nodejs.org/dist/v10.13.0/node-v10.13.0-x64.msi'</span>;</span><br><span class="line">        aDom.target = <span class="string">'_blank'</span>;</span><br><span class="line">        aDom.click();</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="mixed"><a href="#mixed" class="headerlink" title="mixed"></a>mixed</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span> &lt;&lt; <span class="number">31</span> <span class="comment">// 1* 2^31 </span></span><br><span class="line"><span class="number">2</span> &gt;&gt; <span class="number">1</span>  <span class="comment">// 2/2^1</span></span><br><span class="line"><span class="comment">// ---------------</span></span><br><span class="line"><span class="built_in">document</span>.getElementById(<span class="string">"#app"</span>)</span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">"#app"</span>) <span class="comment">// 第一个元素</span></span><br><span class="line"><span class="built_in">document</span>.querySelectorAll(<span class="string">"#app"</span>) <span class="comment">// 符合的所有元素</span></span><br><span class="line">p.example <span class="comment">// class </span></span><br><span class="line">a[target] <span class="comment">// 属性</span></span><br><span class="line">h1,h2 <span class="comment">// 多个选择器按照文档中的位置设置</span></span><br><span class="line"><span class="built_in">document</span>.querySelector(<span class="string">"body"</span>).contentEditable = <span class="literal">true</span> <span class="comment">//设置内容是否可编辑 子元素继承父元素</span></span><br><span class="line">isContentEditable <span class="comment">// 查看是否可编辑</span></span><br><span class="line">&lt;div oncontextmenu=<span class="string">"myFunction()"</span> contextmenu=<span class="string">"mymenu"</span>/&gt; <span class="comment">// 右击菜单事件</span></span><br><span class="line">html </span><br><span class="line">obj.oncontextmenu= <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;</span><br><span class="line">obj.addEventListener(<span class="string">"contextmenu"</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;&#125;)</span><br><span class="line">onabort <span class="comment">// 用于img加载终止 alt title onerror发生错误</span></span><br><span class="line">onhashchange <span class="comment">// 路由锚点变化</span></span><br><span class="line">onfocusin <span class="comment">// 支持冒泡的onfocus</span></span><br><span class="line">oninput <span class="comment">// input onchange失去焦点触发</span></span><br><span class="line">onreset <span class="comment">// form表单被重置触发 input type="reset"</span></span><br><span class="line">onsearch <span class="comment">// input type search 搜索事件</span></span><br><span class="line">onsubmnit <span class="comment">// form 提交 action</span></span><br><span class="line">onscroll <span class="comment">// 元素滚动时触发</span></span><br><span class="line">oncopy <span class="comment">// 在元素上拷贝脚本</span></span><br><span class="line">oncut <span class="comment">// 剪切</span></span><br><span class="line">onpaste <span class="comment">// 粘贴</span></span><br><span class="line">onafterprint <span class="comment">// body 页面打印后触发 window.print() 对应onbeforeprint</span></span><br><span class="line">oncanplay <span class="comment">// 准备开始播放 设置或者返回</span></span><br><span class="line"><span class="built_in">document</span>.getElementsByTagName() <span class="comment">// 返回标签集合</span></span><br><span class="line"><span class="built_in">document</span>.getElementsByClassName() <span class="comment">// 返回类名集合</span></span><br><span class="line">obj.removeEventListener()</span><br><span class="line">removeChild()</span><br><span class="line">removeAttribute()</span><br></pre></td></tr></table></figure>
<h2 id="高度"><a href="#高度" class="headerlink" title="高度"></a>高度</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">window</span>.scrollY <span class="comment">// 225</span></span><br><span class="line"><span class="built_in">window</span>.pageYOffset <span class="comment">// 225</span></span><br><span class="line"><span class="built_in">window</span>.document.body.scrollTop <span class="comment">// 0</span></span><br><span class="line"><span class="built_in">window</span>.document.documentElement.scrollTop <span class="comment">// 225</span></span><br><span class="line"><span class="comment">// 特殊字符:~ ! @ # % ^ * - _ = + ?</span></span><br></pre></td></tr></table></figure>
<h2 id="自适应单位"><a href="#自适应单位" class="headerlink" title="自适应单位"></a>自适应单位</h2><ol>
<li><p>vw：1vw等于视口宽度的1%。</p>
</li>
<li><p>vh：1vh等于视口高度的1%。</p>
</li>
<li><p>vmin：选取vw和vh中最小的那个。</p>
</li>
<li><p>vmax：选取vw和vh中最大的那个</p>
</li>
</ol>
<p>CSS百分比是相对于包含它的最近的父元素的高度和宽度</p>
<h2 id="dom解绑事件"><a href="#dom解绑事件" class="headerlink" title="dom解绑事件"></a>dom解绑事件</h2><ol>
<li><p>attachEvent是IE有的方法，它不遵循W3C标准，而其他的主流浏览器如FF等遵循W3C标准的浏览器都使用addEventListener，所以实际开发中需分开处理。</p>
</li>
<li><p>多次绑定后执行的顺序是不一样的，attachEvent是后绑定先执行，addEventListener是先绑定先执行。</p>
</li>
</ol>
<h3 id="为元素解绑事件"><a href="#为元素解绑事件" class="headerlink" title="为元素解绑事件"></a>为元素解绑事件</h3><p>注意:用什么方式绑定事件,就应该用对应的方式解绑事件</p>
<ul>
<li><ol>
<li>解绑事件</li>
</ol>
</li>
<li>对象.on事件名字=事件处理函数—&gt;绑定事件</li>
<li>对象.on事件名字=null;</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"btn"</span>).onclick=<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">"我是绑定事件"</span>);</span><br><span class="line">&#125;;</span><br><span class="line">$(<span class="string">"btn"</span>).onclick=<span class="literal">null</span>;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<ul>
<li><ol>
<li>解绑事件</li>
</ol>
</li>
<li>对象.addEventListener(“没有on的事件类型”,命名函数,false);—绑定事件 </li>
<li>对象.removeEventListener(“没有on的事件类型”,函数名字,false);</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"btn"</span>).addEventListener(<span class="string">"click"</span>,f1,<span class="literal">false</span>);</span><br><span class="line">$(<span class="string">"btn"</span>).removeEventListener(<span class="string">"click"</span>,f1,<span class="literal">false</span>);</span><br></pre></td></tr></table></figure>
<ul>
<li><ol>
<li>解绑事件(IE)</li>
</ol>
</li>
<li>对象.attachEvent(“on事件类型”,命名函数);—绑定事件</li>
<li>对象.detachEvent(“on事件类型”,函数名字);<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"btn"</span>).attachEvent(<span class="string">"onclick"</span>,f2);</span><br><span class="line">$(<span class="string">"btn"</span>).detachEvent(<span class="string">"onclick"</span>,f1);</span><br></pre></td></tr></table></figure>
</li>
</ul>
<h2 id="位运算符"><a href="#位运算符" class="headerlink" title="位运算符"></a>位运算符</h2><p>位运算符一般使用的很少，当他与数字一起使用的时候，比如~N =&gt; -(N+1),这个式子仅当 N == -1 的时候结果为0。位运算可以提高程序的运行效率。</p>
<p>我们可以在indexof(…)函数前面加一个~来进行布尔检查，检查一个项是否存在于Array或者string中。
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> userName = <span class="string">'break jerry'</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span>(~userName.indexOf(<span class="string">"break"</span>)) &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'access denied'</span>);</span><br><span class="line">&#125;<span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'access granted'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 奇偶性</span></span><br><span class="line"><span class="keyword">if</span>(index &amp; <span class="number">1</span>) &#123;</span><br><span class="line">    <span class="comment">// 1 奇数 odd </span></span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="comment">// 0 偶数 even</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="关闭当前页面"><a href="#关闭当前页面" class="headerlink" title="关闭当前页面"></a>关闭当前页面</h2><ul>
<li>window.close()</li>
<li>window.open(“about:blank”,”_self”).close();</li>
</ul>
<h2 id="字节节省写法"><a href="#字节节省写法" class="headerlink" title="字节节省写法"></a>字节节省写法</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//取整</span></span><br><span class="line"><span class="built_in">parseInt</span>(a,<span class="number">10</span>); </span><br><span class="line"><span class="built_in">Math</span>.floor(a); </span><br><span class="line">~~a; <span class="comment">//节省之后的写法</span></span><br><span class="line">a|<span class="number">0</span>; <span class="comment">//节省之后的写法 </span></span><br><span class="line">a&lt;&lt;<span class="number">0</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//四舍五入</span></span><br><span class="line"><span class="built_in">Math</span>.round(a); </span><br><span class="line">a+<span class="number">.5</span>|<span class="number">0</span>; <span class="comment">//节省之后的写法</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//内置值未定义</span></span><br><span class="line"><span class="literal">undefined</span>; </span><br><span class="line"><span class="keyword">void</span> <span class="number">0</span>; <span class="comment">//节省之后的写法(快)</span></span><br><span class="line"><span class="number">0</span>[<span class="number">0</span>]; <span class="comment">//节省之后的写法(略慢)</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//内置值 无穷</span></span><br><span class="line"><span class="literal">Infinity</span>;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="number">1</span>/<span class="number">0</span>; <span class="comment">//节省之后的写法</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//布尔值短写法</span></span><br><span class="line"><span class="literal">true</span>; </span><br><span class="line">!<span class="number">0</span>; <span class="comment">//节省之后的写法</span></span><br><span class="line"><span class="literal">false</span>; </span><br><span class="line">!<span class="number">1</span>; <span class="comment">//节省之后的写法</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 判断奇偶</span></span><br><span class="line">num &amp; <span class="number">1</span> == <span class="number">1</span> <span class="comment">//奇数</span></span><br><span class="line">num &amp; <span class="number">1</span> == <span class="number">0</span> <span class="comment">//偶数</span></span><br></pre></td></tr></table></figure>
<h2 id="简单计算页面FPS"><a href="#简单计算页面FPS" class="headerlink" title="简单计算页面FPS"></a>简单计算页面FPS</h2><p>整体思路是一秒有一千毫秒，先记录当前时间作为最后一次记录fps的时间，通过 requestAnimationFrame 回调不断给累加fsp计数器，
并且判断上次记录fps的时间是否达到1000毫秒以上，如果满足条件，就将fps累加器的值作为当前fps显示，并且重置fps累加器。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> showFPS = (<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="comment">// noinspection JSUnresolvedVariable, SpellCheckingInspection</span></span><br><span class="line">    <span class="comment">// 函数式</span></span><br><span class="line">    <span class="keyword">var</span> requestAnimationFrame =</span><br><span class="line">        <span class="built_in">window</span>.requestAnimationFrame || <span class="comment">//Chromium  </span></span><br><span class="line">        <span class="built_in">window</span>.webkitRequestAnimationFrame || <span class="comment">//Webkit </span></span><br><span class="line">        <span class="built_in">window</span>.mozRequestAnimationFrame || <span class="comment">//Mozilla Geko </span></span><br><span class="line">        <span class="built_in">window</span>.oRequestAnimationFrame || <span class="comment">//Opera Presto </span></span><br><span class="line">        <span class="built_in">window</span>.msRequestAnimationFrame || <span class="comment">//IE Trident? </span></span><br><span class="line">        <span class="function"><span class="keyword">function</span> (<span class="params">callback</span>) </span>&#123; <span class="comment">//Fallback function </span></span><br><span class="line">            <span class="built_in">window</span>.setTimeout(callback, <span class="number">1000</span> / <span class="number">60</span>);</span><br><span class="line">        &#125;;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">var</span> dialog;</span><br><span class="line">    <span class="keyword">var</span> container;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">var</span> fps = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">var</span> lastTime = <span class="built_in">Date</span>.now(); <span class="comment">// 时间戳</span></span><br><span class="line">    <span class="comment">// 遍历修改style</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">setStyle</span>(<span class="params">el, styles</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">for</span> (<span class="keyword">var</span> key <span class="keyword">in</span> styles) &#123;</span><br><span class="line">            el.style[key] = styles[key];</span><br><span class="line">    &#125;</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">init</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        dialog = <span class="built_in">document</span>.createElement(<span class="string">'dialog'</span>);</span><br><span class="line">        <span class="comment">// 初始化赋值样式</span></span><br><span class="line">        setStyle(dialog, &#123;</span><br><span class="line">            display: <span class="string">'block'</span>,</span><br><span class="line">            border: <span class="string">'none'</span>,</span><br><span class="line">            backgroundColor: <span class="string">'rgba(0, 0, 0, 0.6)'</span>,</span><br><span class="line">            margin: <span class="number">0</span>,</span><br><span class="line">            padding: <span class="string">'4px'</span>,</span><br><span class="line">            position: <span class="string">'fixed'</span>,</span><br><span class="line">            top: <span class="number">0</span>,</span><br><span class="line">            right: <span class="string">'auto,'</span>,</span><br><span class="line">            bottom: <span class="string">'auto'</span>,</span><br><span class="line">            left: <span class="number">0</span>,</span><br><span class="line">            color: <span class="string">'#fff'</span>,</span><br><span class="line">            fontSize: <span class="string">'12px'</span>,</span><br><span class="line">            textAlign: <span class="string">'center'</span>,</span><br><span class="line">            borderRadius: <span class="string">'0 0 4px 0'</span></span><br><span class="line">        &#125;);</span><br><span class="line">        <span class="comment">// container成了dom元素</span></span><br><span class="line">        container.appendChild(dialog);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">calcFPS</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">        offset = <span class="built_in">Date</span>.now() - lastTime;</span><br><span class="line">        fps += <span class="number">1</span>;</span><br><span class="line">    <span class="comment">// 1s内的计数器</span></span><br><span class="line">    <span class="keyword">if</span> (offset &gt;= <span class="number">1000</span>) &#123;</span><br><span class="line">            lastTime += offset; <span class="comment">// Date.now();</span></span><br><span class="line">            displayFPS(fps);</span><br><span class="line">            fps = <span class="number">0</span>;</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">        requestAnimationFrame(calcFPS);</span><br><span class="line">    &#125;;</span><br><span class="line"></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">displayFPS</span>(<span class="params">fps</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">var</span> fpsStr = fps + <span class="string">' FPS'</span>;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">if</span> (!dialog) &#123;</span><br><span class="line">            init();</span><br><span class="line">        &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (fpsStr !== dialog.textContent) &#123;</span><br><span class="line">        <span class="comment">// 重绘 </span></span><br><span class="line">        dialog.textContent = fpsStr;</span><br><span class="line">        &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params">parent</span>) </span>&#123;</span><br><span class="line">    container = parent;</span><br><span class="line">        calcFPS();</span><br><span class="line">    &#125;;</span><br><span class="line">&#125;)();</span><br><span class="line">showFPS(<span class="built_in">document</span>.body);</span><br></pre></td></tr></table></figure>
<h2 id="你不知道的new-target"><a href="#你不知道的new-target" class="headerlink" title="你不知道的new.target"></a>你不知道的new.target</h2><p>new 是构造函数生成实例的命令, ES6为 new 命令引入了 new.target属性。这个属性用于确定构造函数是怎么调用的。
用法：在构造函数中, 如果一个构造函数不是通过 new操作符调用的, new.target会返回 undefined。</p>
<p>使用场景：</p>
<h3 id="es5写法"><a href="#es5写法" class="headerlink" title="es5写法"></a>es5写法</h3><blockquote>
<p>如果一个构造函数不通过 new 命令生成实例, 就报错提醒。
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Shape</span>(<span class="params">options</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">this</span> <span class="keyword">instanceof</span> Shape) &#123;</span><br><span class="line">        <span class="keyword">this</span>.options = options</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// 要么手动给它创建一个实例并返回</span></span><br><span class="line">        <span class="comment">// return new Shape(options)</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 要么提醒</span></span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'Shape 构造函数必须使用 new 操作符'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
</blockquote>
<h3 id="es6写法"><a href="#es6写法" class="headerlink" title="es6写法"></a>es6写法</h3><blockquote>
<p>子类继承父类, 那么父类构造函数中的 new.target 是子类构造函数的名称。
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Zoo</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>() &#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">new</span>.target === Zoo) <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'Zoo构造函数只能用于子类继承'</span>)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> zoo = <span class="keyword">new</span> Zoo()   <span class="comment">// 报错</span></span><br><span class="line"></span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Dog</span> <span class="keyword">extends</span> <span class="title">Zoo</span> </span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>() &#123;</span><br><span class="line">        <span class="keyword">super</span>()</span><br><span class="line">    &#125; </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">const</span> dog = <span class="keyword">new</span> Dog()  <span class="comment">// 不报错</span></span><br></pre></td></tr></table></figure></p>
</blockquote>
<h2 id="文件扩展名"><a href="#文件扩展名" class="headerlink" title="文件扩展名"></a>文件扩展名</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> filePath = <span class="string">'21312321.mp3'</span></span><br><span class="line">filePath.substring(filePath.lastIndexOf(<span class="string">"."</span>)+<span class="number">1</span>,filePath.length) <span class="comment">//'mp3'</span></span><br></pre></td></tr></table></figure>
<h2 id="blur和click冲突"><a href="#blur和click冲突" class="headerlink" title="blur和click冲突"></a>blur和click冲突</h2><blockquote>
<p>场景：平时做表单验证的时候一般都有个input框和删除按钮，然后习惯性在失去焦点的时候&gt; 去验证输入的内容是否正确，做验证，发请求等等。
这个时候，那个点击删除按钮往往也就触发了input的失去焦点事件</p>
<ol>
<li>给失去焦点的时间加上延迟时间，让blur时间在click事件后执行，这个方法固然能够解决问题，但是本人并不是很推荐，因为影响性能，不到最后不用这个方法；</li>
<li>event.relatedTarget.id事件属性返回与事件的目标节点相关的节点。（非IE）</li>
<li>mousedown事件替代处理click事件</li>
</ol>
</blockquote>
<h2 id="object标签"><a href="#object标签" class="headerlink" title="object标签"></a>object标签</h2><p>object标签不在dom文档流里面，浏览器在解析的时候先把object放置在最上层，然后依次解析dom文档，放在下层。</p>
<p>如果这样引用多媒体文件推荐还是不使用object，只有iframe的层级在它之上处理起来很麻烦。</p>
<h2 id="escape、encodeURI、encodeURIComponent区别"><a href="#escape、encodeURI、encodeURIComponent区别" class="headerlink" title="escape、encodeURI、encodeURIComponent区别"></a>escape、encodeURI、encodeURIComponent区别</h2><ol>
<li>escape是对字符串进行编码，对URL使用不需要 encodeURI encodeURIComponent</li>
<li>encodeURI方法不会对下列字符编码 ASCII字母、数字、!@#$&amp;*()=:/,;?+’</li>
<li>encodeURIComponent方法不会对下列字符编码 ASCII字母、数字、!*()’
所以encodeURIComponent比encodeURI编码的范围更大。
实际例子来说，encodeURIComponent会把 http:// 编码成 http%3A%2F%2F 而encodeURI却不会。
当编码url时需要使用encodeURI，当需要编码参数时使用encodeURIComponent</li>
</ol>
<h2 id="链式调用"><a href="#链式调用" class="headerlink" title="链式调用"></a>链式调用</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1.</span>方法体内返回对象实例自身(<span class="keyword">this</span>)</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> Obj = &#123;</span><br><span class="line">    a: <span class="number">1</span>,</span><br><span class="line">    func: <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.a += <span class="number">1</span>;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">this</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line">Obj.func().func();</span><br><span class="line"><span class="built_in">console</span>.log(Obj.a);    <span class="comment">//3</span></span><br><span class="line"><span class="number">2.</span>对象传入后每次调用返回函数自身</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">show</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(str);</span><br><span class="line">        <span class="keyword">return</span> show;</span><br><span class="line">    &#125;</span><br><span class="line">    show(<span class="number">123</span>)(<span class="number">456</span>)(<span class="number">789</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// 控制台打印结果</span></span><br><span class="line"><span class="comment">// 123</span></span><br><span class="line"><span class="comment">// 456</span></span><br><span class="line"><span class="comment">// 789</span></span><br></pre></td></tr></table></figure>
<h2 id="setTimeout-为不可执行的字符串时会造成内存泄漏"><a href="#setTimeout-为不可执行的字符串时会造成内存泄漏" class="headerlink" title="setTimeout 为不可执行的字符串时会造成内存泄漏"></a>setTimeout 为不可执行的字符串时会造成内存泄漏</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">setTimeout(<span class="string">"fn()"</span>,<span class="number">100</span>)</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fn</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">11111111</span>)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="JSON-parse和JSON-stringify其他参数"><a href="#JSON-parse和JSON-stringify其他参数" class="headerlink" title="JSON.parse和JSON.stringify其他参数"></a>JSON.parse和JSON.stringify其他参数</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj =&#123;<span class="attr">name</span>:<span class="string">'cosyer'</span>,<span class="attr">age</span>:<span class="number">15</span>&#125;</span><br><span class="line"><span class="keyword">var</span> newobj = <span class="built_in">JSON</span>.stringify(obj)</span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.parse(newobj,(key,value)=&gt;&#123;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1111111111111</span>,key,value);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">// name cosyer </span></span><br><span class="line"><span class="comment">// age 15 </span></span><br><span class="line"><span class="comment">// "" &#123;&#125;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 3个参数</span></span><br><span class="line"><span class="comment">// JSON.stringify(jsonObj,repalce,space)</span></span><br><span class="line"><span class="comment">// replace可以是数组或者回调函数</span></span><br><span class="line"><span class="keyword">const</span> testJSON = &#123;</span><br><span class="line">   name: <span class="string">'test'</span>,</span><br><span class="line">   cities: &#123;</span><br><span class="line">      shanghai: <span class="number">1</span>,</span><br><span class="line">   &#125;,</span><br><span class="line">&#125;;</span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.stringify(testJSON, [<span class="string">'name'</span>]);</span><br><span class="line"></span><br><span class="line"><span class="comment">// "&#123;"name": 'test'&#125;"</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.stringify(testJSON, [<span class="string">'name'</span>, <span class="string">'cities'</span>]);</span><br><span class="line"> </span><br><span class="line"><span class="comment">//  "&#123;"name": 'test', "cities": &#123;&#125;&#125;"</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.stringify(testJSON, [<span class="string">'name'</span>, <span class="string">'cities'</span>, <span class="string">'shanghai'</span>]);</span><br><span class="line"></span><br><span class="line"><span class="comment">// "&#123;"name": 'test', "cities": &#123;"shanghai": 1&#125;&#125;"</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.stringify(testJSON, (key, value) =&gt; &#123;</span><br><span class="line">    <span class="comment">// 遍历对象</span></span><br><span class="line">    <span class="keyword">if</span> (key === <span class="string">'cities'</span>) &#123;</span><br><span class="line">       <span class="keyword">return</span>  <span class="string">'cities'</span>;</span><br><span class="line">    &#125; </span><br><span class="line">    <span class="keyword">return</span> value; <span class="comment">// 确认value???</span></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">// "&#123;"name": 'test', "cities": 'cities'&#125;"</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.stringify(testJSON, <span class="literal">undefined</span>, <span class="string">'...'</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// "&#123;</span></span><br><span class="line"><span class="comment">//    ..."name": 'test',</span></span><br><span class="line"><span class="comment">//    ..."city": 'shanghai',</span></span><br><span class="line"><span class="comment">//   &#125;"</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.stringify(testJSON, <span class="literal">undefined</span>, <span class="number">7</span>);</span><br><span class="line"></span><br><span class="line"><span class="comment">// "&#123;</span></span><br><span class="line"><span class="comment">//          "name": 'test',</span></span><br><span class="line"><span class="comment">//          "city": 'shanghai',   // 缩进7个空格</span></span><br><span class="line"><span class="comment">// &#125;"</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">JSON</span>.stringify(&#123;<span class="attr">name</span>:<span class="number">123</span>,<span class="attr">age</span>:<span class="number">24</span>&#125;,<span class="literal">null</span>,<span class="string">'\t'</span>)</span><br><span class="line"><span class="comment">// "&#123;</span></span><br><span class="line"><span class="comment">// 	"name": 123,</span></span><br><span class="line"><span class="comment">// 	"age": 21</span></span><br><span class="line"><span class="comment">// &#125;"</span></span><br></pre></td></tr></table></figure>
<h2 id="随机数"><a href="#随机数" class="headerlink" title="随机数"></a>随机数</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// [0,1) 左闭右开 min-max </span></span><br><span class="line"><span class="built_in">Math</span>.floor(min+<span class="built_in">Math</span>.random()*(max-min+<span class="number">1</span>))</span><br><span class="line"><span class="comment">// toString() this is object方法 toString() valueOf</span></span><br><span class="line"><span class="comment">// 随机颜色</span></span><br><span class="line">item.style.backgroundColor = <span class="string">'#'</span> + <span class="built_in">Math</span>.random().toString(<span class="number">16</span>).slice(<span class="number">2</span>, <span class="number">8</span>);</span><br><span class="line"><span class="comment">// "#" + ("00000" + ((Math.random() * 0x1000000) &lt;&lt; 0).toString(16)).slice(-6)</span></span><br></pre></td></tr></table></figure>
<h2 id="chrome浏览器跳转调试"><a href="#chrome浏览器跳转调试" class="headerlink" title="chrome浏览器跳转调试"></a>chrome浏览器跳转调试</h2><p>问题描述：在chrome里调试接口的时候发现页面跳转之后会看不到之前的接口返回，即使你将Perserve log 勾上，能看到跳转之前的接口，但是看不到返回的内容</p>
<p>问题解决：查了一些资料，chrome之所以这么做（看不到跳转之前的接口返回）是为了节省内存开销，但是这个给调试带来了困难，然后我参照stackoverflow的解决方案， 在控制台执行 window.onunload = function() { debugger; } 为了在页面unload之前进入debug，但是尝试了还是看不到跳转之前接口返回的内容，最后的解决方案是用firefix调试，在火狐里在调试中的网络中勾选持续日志可以看到跳转之前的接口，且可以看到接口返回内容。</p>
<p><strong>参考资料</strong> </p>
<ul>
<li><a href="https://stackoverflow.com/questions/38924798/chrome-dev-tools-fails-to-show-response-even-the-content-returned-has-header-con" target="_blank" rel="noopener">Chrome dev tools fails to show response </a></li>
<li><a href="https://ephrain.net/chrome-chrome-%E9%96%8B%E7%99%BC%E8%80%85%E5%B7%A5%E5%85%B7%E8%A3%A1%E7%9C%8B%E4%B8%8D%E5%88%B0%E5%AE%8C%E6%95%B4%E7%9A%84-http-request-%E5%9B%9E%E6%87%89%EF%BC%9F/" target="_blank" rel="noopener">Chrome 开发者工具里看不到完整的 HTTP request 回应？</a></li>
</ul>
<h2 id="时间"><a href="#时间" class="headerlink" title="时间"></a>时间</h2><p><strong>UTC</strong>：世界协调时间，是经过平均太阳时(以格林威治时间GMT为准)、地轴运动修</p>
<p>正后的新时标以及以秒为单位的国际原子时所综合精算而成的时间。UTC比GMT更</p>
<p>加精准，其误差值必须保持在0.9秒以内。若大于0.9秒，则由位于巴黎的国际地</p>
<p>球自转事务中央局发布闰秒，使UTC与地球自转周期一致，所以基本上UTC的本质</p>
<p>强调的是比GMT更为精确的世界时间标准。</p>
<p><strong>GMT</strong>：格林尼治是位于英国南郊的原格林尼治天文台所在地，也是地理经度的起</p>
<p>始点。这里所设定的时间就叫格林尼治时间，也是世界时间参考点，全世界都根</p>
<p>据时区的不同以格林尼治的时间作为标准来设定时间。</p>
<p><strong>夏令时</strong>：因为夏天白天时间比较长，太阳会比较早出现，某些地区就将当地的时</p>
<p>间提早一段时间（例如一小时），以达到利用阳光节约能源的目的。 通常秋季</p>
<p>时，此地区会将当地时间推后一段时间（例如一小时），回复正常时间。</p>
<p>UTC和本地时间的关系：本地时间=UTC+时区+夏令时偏移量。</p>
<h2 id="uuid生成"><a href="#uuid生成" class="headerlink" title="uuid生成"></a>uuid生成</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">uuid</span>(<span class="params">len, radix</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> chars = <span class="string">'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'</span>.split(<span class="string">''</span>);</span><br><span class="line">    <span class="keyword">var</span> uuid = [], i;</span><br><span class="line">    <span class="keyword">var</span> radix_new = radix || chars.length;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">if</span> (len) &#123;</span><br><span class="line">        <span class="comment">// Compact form</span></span><br><span class="line">        <span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; len; i++) &#123;</span><br><span class="line">            uuid[i] = chars[<span class="number">0</span> | <span class="built_in">Math</span>.random() * radix_new];</span><br><span class="line">        &#125;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="comment">// rfc4122, version 4 form</span></span><br><span class="line">        <span class="keyword">var</span> r;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// rfc4122 requires these characters</span></span><br><span class="line">        uuid[<span class="number">8</span>] = uuid[<span class="number">13</span>] = uuid[<span class="number">18</span>] = uuid[<span class="number">23</span>] = <span class="string">'-'</span>;</span><br><span class="line">        uuid[<span class="number">14</span>] = <span class="string">'4'</span>;</span><br><span class="line"></span><br><span class="line">        <span class="comment">// Fill in random data. At i==19 set the high bits of clock sequence as</span></span><br><span class="line">        <span class="comment">// per rfc4122, sec. 4.1.5</span></span><br><span class="line">        <span class="keyword">for</span> (i = <span class="number">0</span>; i &lt; <span class="number">36</span>; i++) &#123;</span><br><span class="line">            <span class="keyword">if</span> (!uuid[i]) &#123;</span><br><span class="line">                r = <span class="number">0</span> | <span class="built_in">Math</span>.random() * <span class="number">16</span>;</span><br><span class="line">                uuid[i] = chars[(i === <span class="number">19</span>) ? (r &amp; <span class="number">0x3</span>) | <span class="number">0x8</span> : r];</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> uuid.join(<span class="string">''</span>);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">generateDynamic32UUID</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="string">"xxxxxxxx-xxxx-xxxx-yxxx-xxxxxxxxxxxx"</span></span><br><span class="line">    .replace(<span class="regexp">/[xy]/g</span>, <span class="function"><span class="keyword">function</span>(<span class="params">c</span>) </span>&#123;</span><br><span class="line">      <span class="keyword">let</span> r = (<span class="built_in">Math</span>.random() * <span class="number">16</span>) | <span class="number">0</span>;</span><br><span class="line">      <span class="keyword">let</span> v = c == <span class="string">"x"</span> ? r : (r &amp; <span class="number">0x3</span>) | <span class="number">0x8</span>;</span><br><span class="line">      <span class="keyword">return</span> v.toString(<span class="number">16</span>);</span><br><span class="line">    &#125;)</span><br><span class="line">    .toUpperCase(); <span class="comment">// "8ED4E1FA-DA4B-5B40-B5AF-05AC386B2753"</span></span><br><span class="line">  <span class="comment">//   return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c =&gt;</span></span><br><span class="line">  <span class="comment">//     (</span></span><br><span class="line">  <span class="comment">//       c ^</span></span><br><span class="line">  <span class="comment">//       (crypto.getRandomValues(new Uint8Array(1))[0] &amp; (15 &gt;&gt; (c / 4)))</span></span><br><span class="line">  <span class="comment">//     ).toString(16)</span></span><br><span class="line">  <span class="comment">//   );</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// hash name</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getHashName</span>(<span class="params">prefix</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> number = randomNum(<span class="number">1</span>, <span class="number">9</span>);</span><br><span class="line">    <span class="keyword">var</span> hash = <span class="built_in">parseInt</span>(((<span class="keyword">new</span> <span class="built_in">Date</span>().getTime()) % <span class="number">3839</span> + <span class="number">256</span>), <span class="number">10</span>).toString(<span class="number">16</span>);</span><br><span class="line">    hash = prefix + <span class="string">'-'</span> + hash + number;</span><br><span class="line">    <span class="keyword">return</span> hash;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">randomNum</span>(<span class="params">min, max</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="built_in">Math</span>.floor(<span class="built_in">Math</span>.random() * (max - min + <span class="number">1</span>)) + min;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="jq原生对照"><a href="#jq原生对照" class="headerlink" title="jq原生对照"></a>jq原生对照</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span>、元素获取</span><br><span class="line"><span class="comment">/*******************原生js**************************/</span></span><br><span class="line"><span class="keyword">var</span> ele = <span class="built_in">document</span>.getElementById(<span class="string">'idName'</span>);</span><br><span class="line"><span class="keyword">var</span> eleArr = <span class="built_in">document</span>.getElementsByClassName(<span class="string">'className'</span>);</span><br><span class="line"><span class="keyword">var</span> eleArr = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'div'</span>);</span><br><span class="line"><span class="keyword">var</span> ele = <span class="built_in">document</span>.querySelector(<span class="string">'#idName'</span>);<span class="comment">//('.className')//('tagName'); //取第一个满足条件的元素</span></span><br><span class="line"><span class="keyword">var</span> eleArr = <span class="built_in">document</span>.querySelectorAll(<span class="string">'.className'</span>);<span class="comment">//('tagName');</span></span><br><span class="line"><span class="comment">/*******************jQuery**************************/</span></span><br><span class="line"><span class="keyword">var</span> ele = $(<span class="string">'#idName'</span>);</span><br><span class="line"><span class="keyword">var</span> ele = $(<span class="string">'.className:eq(0)'</span>); <span class="comment">//取第一个元素</span></span><br><span class="line"><span class="keyword">var</span> eleArr = $(<span class="string">'tagName'</span>);</span><br><span class="line"><span class="number">2</span>、<span class="class"><span class="keyword">class</span>选择器操作</span></span><br><span class="line"><span class="class">/*******************原生<span class="title">js</span>**************************/</span></span><br><span class="line"><span class="class">//<span class="title">className</span> 属性</span></span><br><span class="line"><span class="class"><span class="title">ele</span>.<span class="title">className</span> </span>= <span class="string">'newClassName'</span>;</span><br><span class="line"><span class="comment">//classList操作</span></span><br><span class="line">ele.classList.contains(<span class="string">'className'</span>); <span class="comment">//是否含有该类</span></span><br><span class="line">ele.classList.add(<span class="string">'newClassName1,newClassName2...'</span>); <span class="comment">//添加类</span></span><br><span class="line">ele.classList.remove(<span class="string">'oldClassName1,newClassName2...'</span>); <span class="comment">//删除类</span></span><br><span class="line">ele.classList.toggle(<span class="string">'className'</span>); <span class="comment">//如果元素中有该className，则删除并返回false，否则添加并返回true</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*******************jQuery**************************/</span></span><br><span class="line">ele.hasClass(className);</span><br><span class="line">ele.addClass(<span class="string">'newClassName1,newClassName2...'</span>);</span><br><span class="line">ele.removeClass(<span class="string">'newClassName1,newClassName2...'</span>); <span class="comment">// 元素本身remove()</span></span><br><span class="line">ele.toggleClass(<span class="string">'className'</span>);</span><br><span class="line"><span class="number">3</span>、元素节点操作</span><br><span class="line"><span class="comment">/*******************原生js**************************/</span></span><br><span class="line"><span class="comment">//创建节点</span></span><br><span class="line">    <span class="keyword">var</span> newNode = ele.createElement(<span class="string">'&lt;div&gt;创建&lt;/div&gt;'</span>);</span><br><span class="line"><span class="comment">//插入节点</span></span><br><span class="line">    ele.appendChild(newNode); <span class="comment">//在ele的子节点的末尾插入newNode</span></span><br><span class="line">    ele.insertBefore(newNode,targetNode); <span class="comment">//在ele的子节点targetNode前面插入newNode</span></span><br><span class="line"><span class="comment">//删除节点</span></span><br><span class="line">    ele.removeChild(ele.childNodes[i]); <span class="comment">//删除ele第i+1个子节点</span></span><br><span class="line"><span class="comment">//替换节点</span></span><br><span class="line">    ele.replaceChild(newNode, oldNode); <span class="comment">//替换ele中的子节点</span></span><br><span class="line"><span class="comment">//克隆节点</span></span><br><span class="line">    <span class="keyword">var</span> copyNode = ele.cloneNode(deep); <span class="comment">//deep为true时，深拷贝（包括其子孙节点），为false时只复制本身节点</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*******************jQuery**************************/</span></span><br><span class="line"><span class="comment">//创建节点</span></span><br><span class="line">    <span class="keyword">var</span> newNode = $(<span class="string">'&lt;div&gt;创建&lt;/div&gt;'</span>);</span><br><span class="line"><span class="comment">//插入节点</span></span><br><span class="line">    <span class="comment">//在元素子节点末尾插入</span></span><br><span class="line">    ele.append(newNode); <span class="comment">//在ele的子节点的末尾插入newNode</span></span><br><span class="line">    newNode.appendTo(ele); <span class="comment">//在ele的子节点的末尾插入newNode</span></span><br><span class="line">    <span class="comment">//在元素子节点前端插入</span></span><br><span class="line">    ele.prepend(newNode); <span class="comment">//在ele的子节点的前端插入newNode</span></span><br><span class="line">    newNode.prependTo(ele); <span class="comment">//在ele的子节点的前端插入newNode</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//在元素后面添加</span></span><br><span class="line">    ele.after(newNode);</span><br><span class="line">    newNode.insertAfter(ele);</span><br><span class="line">    <span class="comment">//在元素前面添加</span></span><br><span class="line">    ele.before(newNode);</span><br><span class="line">    newNode.insertBefore(ele);</span><br><span class="line"></span><br><span class="line"><span class="comment">//删除节点</span></span><br><span class="line">    ele.remove(); <span class="comment">//移除ele及其所有文本、子孙节点、数据和事件</span></span><br><span class="line">    ele.detach(); <span class="comment">//移除ele及其所有文本、子孙节点，但是保留数据和事件</span></span><br><span class="line">    ele.empty(); <span class="comment">//清除ele所有的内容和子孙元素，但是ele节点本身和其属性事件等还在</span></span><br><span class="line"></span><br><span class="line"><span class="comment">//替换节点</span></span><br><span class="line">    ele.replaceWith(newNode); <span class="comment">//替换ele为新的内容(可以是html元素，dom元素，jQuery元素)</span></span><br><span class="line">    newNode.replaceAll(ele); <span class="comment">//替换ele为新的html元素</span></span><br><span class="line"><span class="comment">//克隆节点</span></span><br><span class="line">    ele.clone(deep); <span class="comment">//deep为true时，深拷贝（包括其事件处理函数），为false时只复制本身，默认false</span></span><br><span class="line"><span class="number">4</span>、元素节点遍历</span><br><span class="line"><span class="comment">/*******************原生js**************************/</span></span><br><span class="line"><span class="comment">// 子节点</span></span><br><span class="line"><span class="keyword">var</span> eleArr = ele.childNodes; <span class="comment">// 所有子节点</span></span><br><span class="line"><span class="keyword">var</span> eleArr = ele.children; <span class="comment">//所有子节点数组，用得较多</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> firstEle = ele.firstChild; <span class="comment">//第一个子节点 低版本浏览器firstElementChild</span></span><br><span class="line"><span class="keyword">var</span> lastEle = ele.lastChild; <span class="comment">//最后一个子节点 低版本浏览器lastElementChild</span></span><br><span class="line"><span class="comment">// 父节点</span></span><br><span class="line"><span class="keyword">var</span> parentEle = ele.parentNode;</span><br><span class="line"><span class="comment">// 兄弟节点</span></span><br><span class="line"><span class="keyword">var</span> nextEle = ele.nextSibling; <span class="comment">//下一个节点</span></span><br><span class="line"><span class="keyword">var</span> previousEle = ele.previousSibling; <span class="comment">//上一个节点</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/*******************jQuery**************************/</span></span><br><span class="line"><span class="comment">// 子节点</span></span><br><span class="line"><span class="keyword">var</span> eleArr = ele.children(); <span class="comment">//所有子节点数组</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> firstEle = ele.first(); <span class="comment">//第一个子节点</span></span><br><span class="line"><span class="keyword">var</span> lastEle = ele.last(); <span class="comment">//最后一个子节点</span></span><br><span class="line"><span class="comment">// 父节点</span></span><br><span class="line"><span class="keyword">var</span> parentEle = ele.parent(); <span class="comment">//直接父元素</span></span><br><span class="line"><span class="keyword">var</span> parentEleArr = ele.parents(); <span class="comment">//所有祖先元素</span></span><br><span class="line"><span class="keyword">var</span> parentEle = ele.offsetParent(); <span class="comment">// 第一个有定位的父元素</span></span><br><span class="line"><span class="keyword">var</span> parentEleArr = ele.parentsUntil(stop, filter); <span class="comment">// 满足条件之间的父节点</span></span><br><span class="line"></span><br><span class="line"><span class="comment">// 兄弟节点</span></span><br><span class="line"><span class="keyword">var</span> nextEle = ele.next(); <span class="comment">//下一个节点</span></span><br><span class="line"><span class="keyword">var</span> nextEleArr = ele.nextAll(); <span class="comment">//ele后面所有同级节点</span></span><br><span class="line"><span class="keyword">var</span> previousEle = ele.prev(); <span class="comment">//上一个节点</span></span><br><span class="line"><span class="keyword">var</span> previousEle = ele.prevAll(); <span class="comment">//ele之前所有同级节点</span></span><br><span class="line"><span class="keyword">var</span> siblingsArr = ele.siblings(); <span class="comment">//所有同级元素节点</span></span><br><span class="line"><span class="number">5</span>、属性操作</span><br><span class="line"><span class="comment">/*******************原生js**************************/</span></span><br><span class="line"><span class="comment">// 属性数组</span></span><br><span class="line"><span class="keyword">var</span> attrArr = ele.attributes;</span><br><span class="line"><span class="comment">// 判断属性</span></span><br><span class="line"><span class="keyword">var</span> bool = ele.hasAttribute(<span class="string">'attrName'</span>); <span class="comment">//是否有指定属性</span></span><br><span class="line"><span class="keyword">var</span> bool = ele.hasAttributes(); <span class="comment">//是否有属性</span></span><br><span class="line"><span class="comment">// 获取属性值</span></span><br><span class="line"><span class="keyword">var</span> attrValue = ele.getAttribute(<span class="string">'attrName'</span>);</span><br><span class="line"><span class="comment">// 设置属性值</span></span><br><span class="line">ele.setAttribute(<span class="string">'attrName'</span>,<span class="string">'attrValue'</span>);</span><br><span class="line"><span class="comment">// 删除属性</span></span><br><span class="line">ele.removeAttribute(<span class="string">'attrName'</span>);</span><br><span class="line"><span class="comment">/*******************jQuery**************************/</span></span><br><span class="line"><span class="comment">//在设置disabled、selected、checked等这些Boolean类型自带属性时，我们需要用prop()方法；</span></span><br><span class="line"><span class="comment">// 其他字符串类型自带属性时，我们使用attr()方法即可;DOM节点可见的自定义属性我们也使用attr()方法。</span></span><br><span class="line"><span class="comment">// 获取属性值</span></span><br><span class="line"><span class="keyword">var</span> attrValue = ele.attr(<span class="string">'attrName'</span>);</span><br><span class="line"><span class="keyword">var</span> propValue = ele.prop(<span class="string">'propName'</span>);<span class="comment">//</span></span><br><span class="line"><span class="comment">// 设置属性值</span></span><br><span class="line">ele.attr(<span class="string">'attrName'</span>,<span class="string">'attrValue'</span>); <span class="comment">//自定义的一些属性</span></span><br><span class="line">ele.prop(<span class="string">'propName'</span>,<span class="string">'propValue'</span>); <span class="comment">//disabled等一些属性，HTML元素的固有属性</span></span><br><span class="line"><span class="comment">// 删除属性</span></span><br><span class="line">ele.removeAttr(<span class="string">'attrName'</span>);</span><br><span class="line"><span class="number">6</span>、事件</span><br><span class="line"><span class="comment">/*******************原生js**************************/</span></span><br><span class="line"><span class="comment">//事件绑定及解绑</span></span><br><span class="line">ele.addEventListener(<span class="string">'click'</span>,func,<span class="literal">false</span>);</span><br><span class="line">ele.removeEventListener(<span class="string">'click'</span>,func,<span class="literal">false</span>);</span><br><span class="line">ele.onclick = func;</span><br><span class="line">ele.onclick = <span class="literal">null</span>;</span><br><span class="line">ele.attachEvent(<span class="string">'onclick'</span>,func); <span class="comment">//ie8以下</span></span><br><span class="line">ele.detachEvent(<span class="string">'onclick'</span>,func); <span class="comment">//ie8以下</span></span><br><span class="line"><span class="comment">/*******************jQuery**************************/</span></span><br><span class="line"><span class="comment">/*多种事件绑定和解绑方法*/</span></span><br><span class="line"><span class="comment">/**方法1</span></span><br><span class="line"><span class="comment"> * 1、直接绑定事件方法mouseenter()...等等</span></span><br><span class="line"><span class="comment"> * 2、这样的方式，下面两个事件不会被层叠，都会执行</span></span><br><span class="line"><span class="comment"> * 3、只能一个一个绑定</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">$(<span class="string">"div:eq(0)"</span>).click(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    alert(<span class="number">1</span>);</span><br><span class="line">&#125;);</span><br><span class="line">$(<span class="string">"div:eq(0)"</span>).click(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    alert(<span class="number">2</span>);</span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line"><span class="comment">/**方法2</span></span><br><span class="line"><span class="comment"> * 1、bind("event1 event2 ... eventx",fn)</span></span><br><span class="line"><span class="comment"> * 2、同时绑定多个事件触发条件，执行同一个函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">$(<span class="string">"div:eq(1)"</span>).bind(<span class="string">"click mouseenter"</span>,<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    alert(<span class="string">"bind绑定法"</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//解绑</span></span><br><span class="line">$(<span class="string">"div:eq(1)"</span>).unbind(<span class="string">"click"</span>); <span class="comment">//解绑指定的</span></span><br><span class="line"><span class="comment">//$("div:eq(1)").unbind();  //解绑所有的</span></span><br><span class="line"></span><br><span class="line"><span class="comment">/**方法3</span></span><br><span class="line"><span class="comment"> * 1、delegate("selector","event1 event2 ... eventx",fn)</span></span><br><span class="line"><span class="comment"> * 2、可以绑定父盒子里的子盒子触发事件，执行函数</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line">$(<span class="string">"div:eq(2)"</span>).delegate(<span class="string">"button"</span>,<span class="string">"click mouseleave"</span>,<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    alert(<span class="string">"delegate绑定法"</span>);</span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//解绑</span></span><br><span class="line">$(<span class="string">"div:eq(2)"</span>).undelegate();</span><br><span class="line"><span class="comment">/**方法4</span></span><br><span class="line"><span class="comment"> * 重点使用！！！</span></span><br><span class="line"><span class="comment"> * 1、on("event1 event2 ... eventx","selector",data,fn)</span></span><br><span class="line"><span class="comment"> * 2、可以绑定父盒子里的后代盒子触发事件，执行函数</span></span><br><span class="line"><span class="comment"> * 3、参数data由event.data带入函数中</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line">$(<span class="string">"div:eq(3)"</span>).on(<span class="string">"click mouseleave"</span>,<span class="string">"button"</span>,&#123;<span class="string">"name"</span>:<span class="string">"mjm"</span>,<span class="string">"age"</span>:<span class="number">24</span>&#125;,<span class="function"><span class="keyword">function</span> (<span class="params">event</span>) </span>&#123;</span><br><span class="line">    alert(<span class="string">"on绑定法"</span>+event.data.name);</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"><span class="comment">//解绑</span></span><br><span class="line">$(<span class="string">"div:eq(3)"</span>).off();</span><br></pre></td></tr></table></figure>
<h2 id="实现复制tiny"><a href="#实现复制tiny" class="headerlink" title="实现复制tiny"></a>实现复制tiny</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 复制连接地址</span></span><br><span class="line"><span class="built_in">window</span>.copyLink = <span class="function"><span class="keyword">function</span> (<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">window</span>.clipboardData) &#123;</span><br><span class="line">        <span class="comment">// 兼容ie11以下浏览器</span></span><br><span class="line">        <span class="built_in">window</span>.clipboardData.setData(<span class="string">'Text'</span>, str);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="keyword">var</span> $input = <span class="built_in">document</span>.createElement(<span class="string">'input'</span>);</span><br><span class="line">        <span class="keyword">var</span> body = <span class="built_in">document</span>.querySelector(<span class="string">"body"</span>)</span><br><span class="line">        $input.value=str;</span><br><span class="line">        body.appendChild($input);</span><br><span class="line">        $input.select();</span><br><span class="line">        <span class="built_in">document</span>.execCommand(<span class="string">'copy'</span>);</span><br><span class="line">        <span class="comment">// $input.remove();</span></span><br><span class="line">        body.remove($input)</span><br><span class="line">    &#125;</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h2 id="scrollbar滚动条样式优化"><a href="#scrollbar滚动条样式优化" class="headerlink" title="scrollbar滚动条样式优化"></a>scrollbar滚动条样式优化</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-pseudo">::-webkit-scrollbar-corner</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: transparent;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::-webkit-scrollbar-button</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">display</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::-webkit-scrollbar-thumb</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">7px</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#b4babf</span>;</span><br><span class="line">  <span class="attribute">border-radius</span>: <span class="number">7px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::-webkit-scrollbar</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">7px</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">7px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::-webkit-scrollbar-track</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">15px</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-pseudo">::-webkit-scrollbar</span><span class="selector-pseudo">:hover</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: transparent;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="内网ip段"><a href="#内网ip段" class="headerlink" title="内网ip段"></a>内网ip段</h2><p>内网段10.0.0.0—10.255.255.255，172.16.0.0—172.31.255.255，192.168.0.0—192.168.255.255</p>
<h2 id="获取当前鼠标坐标"><a href="#获取当前鼠标坐标" class="headerlink" title="获取当前鼠标坐标"></a>获取当前鼠标坐标</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> getCoordInDocumentExample = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">var</span> coords = <span class="built_in">document</span>.getElementById(<span class="string">"colorPanel"</span>);</span><br><span class="line">  coords.onmousemove = <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> pointer = getCoordInDocument(e);</span><br><span class="line">    <span class="keyword">var</span> coord = <span class="built_in">document</span>.getElementById(<span class="string">"colorText"</span>);</span><br><span class="line">    coord.innerHTML = <span class="string">"X,Y=("</span> + pointer.x + <span class="string">", "</span> + pointer.y + <span class="string">")"</span>;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> getCoordInDocument = <span class="function"><span class="keyword">function</span> (<span class="params">e</span>) </span>&#123;</span><br><span class="line">  e = e || <span class="built_in">window</span>.event;</span><br><span class="line">  <span class="keyword">var</span> x = e.pageX || (e.clientX +</span><br><span class="line">    (<span class="built_in">document</span>.documentElement.scrollLeft ||</span><br><span class="line">      <span class="built_in">document</span>.body.scrollLeft));</span><br><span class="line">  <span class="keyword">var</span> y = e.pageY || (e.clientY +</span><br><span class="line">    (<span class="built_in">document</span>.documentElement.scrollTop ||</span><br><span class="line">      <span class="built_in">document</span>.body.scrollTop));</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="string">'x'</span>: x,</span><br><span class="line">    <span class="string">'y'</span>: y</span><br><span class="line">  &#125;;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="built_in">window</span>.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">  getCoordInDocumentExample();</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h2 id="类数组对象转数组"><a href="#类数组对象转数组" class="headerlink" title="类数组对象转数组"></a>类数组对象转数组</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">func</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="comment">// 类数组对象转数组</span></span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">arguments</span>) <span class="comment">// &#123;0:1,1:2,2:3,length:3&#125;</span></span><br><span class="line">    <span class="built_in">console</span>.log([].slice.call(<span class="built_in">arguments</span>))</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">Array</span>.prototype.slice.call(<span class="built_in">arguments</span>))</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="built_in">Array</span>.from(<span class="built_in">arguments</span>))</span><br><span class="line">    <span class="built_in">console</span>.log([...arguments])</span><br><span class="line">&#125;</span><br><span class="line">func(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)</span><br></pre></td></tr></table></figure>
<h2 id="页面滚动条到底判断"><a href="#页面滚动条到底判断" class="headerlink" title="页面滚动条到底判断"></a>页面滚动条到底判断</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//获取网页的总高度，主要是考虑兼容性所以把Ie支持的documentElement也写了，这个方法至少支持IE8</span></span><br><span class="line"><span class="keyword">var</span> htmlHeight = <span class="built_in">document</span>.body.scrollHeight || <span class="built_in">document</span>.documentElement.scrollHeight;</span><br><span class="line"><span class="comment">//clientHeight是网页在浏览器中的可视高度，</span></span><br><span class="line"><span class="keyword">var</span> clientHeight = <span class="built_in">document</span>.body.clientHeight || <span class="built_in">document</span>.documentElement.clientHeight;</span><br><span class="line"><span class="comment">//scrollTop是浏览器滚动条的top位置，</span></span><br><span class="line"><span class="keyword">var</span> scrollTop = <span class="built_in">document</span>.body.scrollTop || <span class="built_in">document</span>.documentElement.scrollTop;</span><br><span class="line"><span class="comment">//通过判断滚动条的top位置与可视网页之和与整个网页的高度是否相等来决定是否加载内容；</span></span><br><span class="line"><span class="keyword">if</span> (scrollTop + clientHeight == htmlHeight) &#123;</span><br><span class="line">    <span class="comment">// 滚动条到底</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 没有垂直滚动条的情况下，scrollHeight值与元素视图填充所有内容所需要的最小值clientHeight相同</span></span><br></pre></td></tr></table></figure>
<ul>
<li>clientHeight：表示的是可视区域的高度，不包括border和滚动条 </li>
<li>offsetHeight：表示的是可视区域的高度，包括了border和滚动条 </li>
<li>scrollHeight：表示了所有区域的高度。包含了因为滚动被隐藏的部分 </li>
<li>clientTop：表示边框border的厚度，在未指定的情况下为0 </li>
<li>scrollTop：滚动后被隐藏的高度</li>
</ul>
<h2 id="yield函数"><a href="#yield函数" class="headerlink" title="yield函数"></a>yield函数</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 传入匿名函数</span></span><br><span class="line"><span class="function"><span class="keyword">function</span>* <span class="title">fibonacci</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> [prev, curr] = [<span class="number">0</span>, <span class="number">1</span>];</span><br><span class="line">    <span class="keyword">while</span> (<span class="literal">true</span>) &#123;</span><br><span class="line">    [prev, curr] = [curr, prev + curr];</span><br><span class="line">    <span class="keyword">yield</span> curr;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 含有迭代器iterate</span></span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">let</span> n <span class="keyword">of</span> fibonacci()) &#123;</span><br><span class="line">    <span class="keyword">if</span> (n &gt;= <span class="number">1000</span>) &#123;</span><br><span class="line">    <span class="keyword">break</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">console</span>.log(n);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// 1 2 3 5 8</span></span><br></pre></td></tr></table></figure>
<h3 id="复制添加版权申明"><a href="#复制添加版权申明" class="headerlink" title="复制添加版权申明"></a>复制添加版权申明</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (<span class="built_in">window</span>.clipboardData) &#123;</span><br><span class="line">    <span class="comment">// IE</span></span><br><span class="line">    <span class="built_in">document</span>.body.oncopy = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        event.returnValue = <span class="literal">false</span>;</span><br><span class="line">        <span class="keyword">var</span> t=<span class="built_in">document</span>.selection.createRange().text;</span><br><span class="line">        <span class="keyword">var</span> s=<span class="string">" 原文链接："</span>+location.href;</span><br><span class="line">        clipboardData.setData(<span class="string">'Text'</span>,t+<span class="string">'\r\n'</span>+s);</span><br><span class="line">    &#125;;</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">addLink</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">        <span class="keyword">var</span> body_element = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'body'</span>)[<span class="number">0</span>];</span><br><span class="line">        <span class="keyword">var</span> selection;</span><br><span class="line">        selection = <span class="built_in">window</span>.getSelection();</span><br><span class="line">        <span class="keyword">var</span> pagelink = <span class="string">" 原文链接："</span>+location.href;</span><br><span class="line">        <span class="keyword">var</span> copytext = selection + pagelink;</span><br><span class="line"></span><br><span class="line">        <span class="keyword">var</span> newdiv = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>);</span><br><span class="line">        newdiv.style.position=<span class="string">'absolute'</span>;</span><br><span class="line">        newdiv.style.left=<span class="string">'-99999px'</span>;</span><br><span class="line">        body_element.appendChild(newdiv);</span><br><span class="line">        newdiv.innerHTML = copytext;</span><br><span class="line">        selection.selectAllChildren(newdiv);</span><br><span class="line">        <span class="built_in">window</span>.setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;body_element.removeChild(newdiv);&#125;,<span class="number">0</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">document</span>.oncopy = addLink;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="包版本号"><a href="#包版本号" class="headerlink" title="包版本号"></a>包版本号</h2><p>一个包的版本号基本由三位数字构成 x.x.x, 它们分别是主版本号, 次版本号, 修订号。</p>
<ul>
<li>*: 升级主版本号 + 次版本号 + 修订号;</li>
<li>^: 升级次版本号 + 修订号;</li>
<li>~: 升级修订号;</li>
</ul>
<p>npm使用 a.b.c 的版本号来管理安装包，a大达版本号，有重大api改变，一般不向下兼容，b为小版本号，新增功能，向下兼容，c为补丁号，通常修复一些bug。</p>
<h2 id="script标签关键字"><a href="#script标签关键字" class="headerlink" title="script标签关键字"></a>script标签关键字</h2><ul>
<li>defer 并发下载 顺序执行 渲染完再执行</li>
<li>async 并发下载 异步执行谁先下载完 谁先执行</li>
</ul>
<h2 id="防止对象篡改"><a href="#防止对象篡改" class="headerlink" title="防止对象篡改"></a>防止对象篡改</h2><ul>
<li>Object.preventExtensions(obj): obj 不能添加属性</li>
<li>Object.seal(obj): obj 不能添加/删除属性</li>
<li>Object.freeze(obj): obj 不能添加/删除/修改属性</li>
</ul>
<p>Object.freeze工作方式与Object.preventExtensions相同，并且它使所有对象的属性不可写且不可配置。 唯一的缺点是<code>Object.freeze</code>仅适用于对象的第一级：嵌套对象不受操作的影响。</p>
<h2 id="module-exports和exports"><a href="#module-exports和exports" class="headerlink" title="module.exports和exports"></a>module.exports和exports</h2><p>module.exports才是真正的接口，exports只不过是它的一个辅助工具。　最终返回给调用的是module.exports而不是exports。
所有的exports收集到的属性和方法，都赋值给了Module.exports。当然，这有个前提，就是module.exports本身不具备任何属性和方法。</p>
<ol>
<li><p>最好分别定义module.exports和exports</p>
</li>
<li><p>建议导出对象用module.exports,导出多个方法和变量用exports</p>
</li>
</ol>
<h2 id="meta自动跳转"><a href="#meta自动跳转" class="headerlink" title="meta自动跳转"></a>meta自动跳转</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;meta http-equiv=<span class="string">"Refresh"</span> content=<span class="string">"1; url=http://www.baidu.com"</span>/&gt;</span><br></pre></td></tr></table></figure>
<h2 id="前端生成文件并下载"><a href="#前端生成文件并下载" class="headerlink" title="前端生成文件并下载"></a>前端生成文件并下载</h2><p>Blob对象简要介绍</p>
<p>Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。生成Blob对象有两种方法：一种是使用Blob构造函数，另一种是对现有的Blob对象使用slice方法切出一部分。</p>
<blockquote>
<p>const aBlob = new Blob( array, options );
参数说明</p>
</blockquote>
<ul>
<li>array 是一个由ArrayBuffer, ArrayBufferView, Blob, DOMString 等对象构成的 Array ，或者其他类似对象的混合体，它将会被放进 Blob。DOMStrings会被编码为UTF-8。</li>
<li>options 是一个可选的BlobPropertyBag字典，它可能会指定如下两个属性：
type，默认值为 “”，它代表了将会被放入到blob中的数组内容的MIME类型。
endings，默认值为”transparent”，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： “native”，代表行结束符会被更改为适合宿主操作系统文件系统的换行符，或者 “transparent”，代表会保持blob中保存的结束符不变</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// const debug = &#123;hello: "world"&#125;;</span></span><br><span class="line"><span class="comment">// const blob = new Blob([JSON.stringify(debug, null, 2)],&#123;type : 'application/json'&#125;);</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createAndDownloadFile</span>(<span class="params">fileName, filePath</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">const</span> aTag = <span class="built_in">document</span>.createElement(<span class="string">'a'</span>);</span><br><span class="line">    <span class="keyword">const</span> blob = <span class="keyword">new</span> Blob([filePath]);</span><br><span class="line">    aTag.download = <span class="string">`<span class="subst">$&#123;fileName&#125;</span>.json`</span>;</span><br><span class="line">    aTag.href = URL.createObjectURL(blob);</span><br><span class="line">    aTag.click();</span><br><span class="line">    URL.revokeObjectURL(blob);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="防止frame嵌套"><a href="#防止frame嵌套" class="headerlink" title="防止frame嵌套"></a>防止frame嵌套</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(top != self)&#123;</span><br><span class="line">    location.href = ”about:blank”;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="取反运算简化indexOf判断"><a href="#取反运算简化indexOf判断" class="headerlink" title="取反运算简化indexOf判断"></a>取反运算简化indexOf判断</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span>(~[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].indexOf(<span class="number">1</span>))&#123;</span><br><span class="line">    <span class="comment">// 存在</span></span><br><span class="line">&#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="comment">// 不存在</span></span><br><span class="line">&#125;</span><br><span class="line">[(<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>)] <span class="comment">// 3</span></span><br></pre></td></tr></table></figure>
<h2 id="已知年月，求当月多少天"><a href="#已知年月，求当月多少天" class="headerlink" title="已知年月，求当月多少天"></a>已知年月，求当月多少天</h2><ul>
<li>先判断该年份是否是闰年，来处理 2 月份情况，闰年 2 月共 29 天，非闰年 2 月共 28 天</li>
<li>再判断其他月份，如 1 月共 31 天，4 月共 30 天</li>
</ul>
<p><strong>更简便的方法</strong>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// Date API 处理日期溢出时，会自动往后推延响应时间</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMonthCountDay</span> (<span class="params">year, month</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="number">32</span> - <span class="keyword">new</span> <span class="built_in">Date</span>(year, month<span class="number">-1</span>, <span class="number">32</span>).getDate();</span><br><span class="line">  <span class="comment">// 32 - (32-当月天数) = 当月天数</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// better</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getMonthCountDay</span> (<span class="params">year, month</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Date</span>(year, month , <span class="number">0</span>).getDate();</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<h2 id="日期格式转化-2019-3-19-gt-2019-3-19"><a href="#日期格式转化-2019-3-19-gt-2019-3-19" class="headerlink" title="日期格式转化 2019/3/19 =&gt; 2019-3-19"></a>日期格式转化 2019/3/19 =&gt; 2019-3-19</h2><ol>
<li><p>正则</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line"><span class="keyword">let</span> dateStr = date.toLocaleDateString().replace(<span class="regexp">/\//g</span>,<span class="string">'-'</span>)</span><br></pre></td></tr></table></figure>
</li>
<li><p>数组计算</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> date = <span class="keyword">new</span> <span class="built_in">Date</span>()</span><br><span class="line"><span class="keyword">let</span> arr = date.toLocaleDateString().split(<span class="string">'/'</span>)</span><br><span class="line">arr = arr.map(<span class="function">(<span class="params">item</span>) =&gt;</span> &#123;</span><br><span class="line"><span class="keyword">return</span> <span class="built_in">parseInt</span>(item) &lt; <span class="number">10</span> ? <span class="string">'0'</span> + item : item</span><br><span class="line">&#125;)</span><br><span class="line"><span class="keyword">let</span> dateStr = arr.join(<span class="string">'-'</span>)</span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="求数值的n次幂"><a href="#求数值的n次幂" class="headerlink" title="求数值的n次幂"></a>求数值的n次幂</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.pow(<span class="number">2</span>,<span class="number">10</span>); <span class="comment">//1024</span></span><br><span class="line"><span class="number">2</span>**<span class="number">10</span> <span class="comment">// 1024 es7</span></span><br><span class="line"><span class="number">2</span>&lt;&lt;<span class="number">9</span> <span class="comment">//1024</span></span><br></pre></td></tr></table></figure>
<h2 id="分号的重要性"><a href="#分号的重要性" class="headerlink" title="分号的重要性"></a>分号的重要性</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">const</span> luke = &#123;&#125;</span><br><span class="line"><span class="keyword">const</span> leia = &#123;&#125;</span><br><span class="line">[luke, leia].forEach(<span class="function"><span class="params">jedi</span> =&gt;</span> jedi.father = <span class="string">'vader'</span>);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span></span><br><span class="line">    <span class="string">'search your feelings, you know it to be foo'</span></span><br><span class="line">&#125; <span class="comment">// undefined</span></span><br></pre></td></tr></table></figure>
<h2 id="前端h5-download属性下载文件-appendChild兼容firefox"><a href="#前端h5-download属性下载文件-appendChild兼容firefox" class="headerlink" title="前端h5 download属性下载文件(appendChild兼容firefox)"></a>前端h5 download属性下载文件(appendChild兼容firefox)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">downFile</span>(<span class="params">content, filename</span>) </span>&#123;</span><br><span class="line">    <span class="comment">// 创建隐藏的可下载链接</span></span><br><span class="line">    <span class="keyword">var</span> eleLink = <span class="built_in">document</span>.createElement(<span class="string">'a'</span>);</span><br><span class="line">    eleLink.download = filename;</span><br><span class="line">    eleLink.style.display = <span class="string">'none'</span>;</span><br><span class="line">    <span class="comment">// 字符内容转变成blob地址</span></span><br><span class="line">    <span class="keyword">var</span> blob = <span class="keyword">new</span> Blob([content]);</span><br><span class="line">    eleLink.href = URL.createObjectURL(blob);</span><br><span class="line">    <span class="comment">// 触发点击</span></span><br><span class="line">    <span class="built_in">document</span>.body.appendChild(eleLink);</span><br><span class="line">    eleLink.click();</span><br><span class="line">    <span class="comment">// 然后移除</span></span><br><span class="line">    <span class="built_in">document</span>.body.removeChild(eleLink);</span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<h2 id="禁止滚动条滚动"><a href="#禁止滚动条滚动" class="headerlink" title="禁止滚动条滚动"></a>禁止滚动条滚动</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> keys = [<span class="number">37</span>, <span class="number">38</span>, <span class="number">39</span>, <span class="number">40</span>];</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">preventDefault</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  e = e || <span class="built_in">window</span>.event;</span><br><span class="line">  <span class="keyword">if</span> (e.preventDefault)</span><br><span class="line">      e.preventDefault();</span><br><span class="line">  e.returnValue = <span class="literal">false</span>;  </span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">keydown</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = keys.length; i--;) &#123;</span><br><span class="line">        <span class="keyword">if</span> (e.keyCode === keys[i]) &#123;</span><br><span class="line">            preventDefault(e);</span><br><span class="line">            <span class="keyword">return</span>;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">wheel</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">  preventDefault(e);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">disable_scroll</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (<span class="built_in">window</span>.addEventListener) &#123;</span><br><span class="line">      <span class="built_in">window</span>.addEventListener(<span class="string">'DOMMouseScroll'</span>, wheel, <span class="literal">false</span>);</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="built_in">window</span>.onmousewheel = <span class="built_in">document</span>.onmousewheel = wheel;</span><br><span class="line">  <span class="built_in">document</span>.onkeydown = keydown;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">enable_scroll</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">window</span>.removeEventListener) &#123;</span><br><span class="line">        <span class="built_in">window</span>.removeEventListener(<span class="string">'DOMMouseScroll'</span>, wheel, <span class="literal">false</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="built_in">window</span>.onmousewheel = <span class="built_in">document</span>.onmousewheel = <span class="built_in">document</span>.onkeydown = <span class="literal">null</span>;  </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="map等遍历注意事项"><a href="#map等遍历注意事项" class="headerlink" title="map等遍历注意事项"></a>map等遍历注意事项</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> it = []</span><br><span class="line">it.map(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">111111111111</span>)</span><br><span class="line">&#125;)</span><br><span class="line"><span class="comment">// 压根就不会执行</span></span><br></pre></td></tr></table></figure>
<h2 id="符合密码学要求的随机值"><a href="#符合密码学要求的随机值" class="headerlink" title="符合密码学要求的随机值"></a>符合密码学要求的随机值</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getRandomNumbers</span>(<span class="params">min, max</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> minValue = min || <span class="string">''</span>;</span><br><span class="line">    <span class="keyword">var</span> maxValue = max || <span class="string">''</span>;</span><br><span class="line">    <span class="keyword">var</span> cryptoObj = <span class="built_in">window</span>.crypto || <span class="built_in">window</span>.msCrypto;</span><br><span class="line">    <span class="keyword">var</span> array = <span class="keyword">new</span> <span class="built_in">Uint32Array</span>(<span class="number">1</span>);</span><br><span class="line">    cryptoObj &amp;&amp; cryptoObj.getRandomValues(array);</span><br><span class="line">    <span class="keyword">var</span> result = <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">if</span> (minValue || maxValue) &#123;</span><br><span class="line">        <span class="keyword">if</span> (!maxValue) &#123;</span><br><span class="line">            minValue = <span class="number">0</span>;</span><br><span class="line">            maxValue = min;</span><br><span class="line">        &#125;</span><br><span class="line">        result = <span class="built_in">parseInt</span>(minValue, <span class="number">10</span>) + (array[<span class="number">0</span>] % (<span class="built_in">parseInt</span>(maxValue, <span class="number">10</span>) - <span class="built_in">parseInt</span>(minValue, <span class="number">10</span>)));</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        result = array[<span class="number">0</span>];</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> result;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="字符串反转"><a href="#字符串反转" class="headerlink" title="字符串反转"></a>字符串反转</h2><p>如果需要支持UTF-16或其他多字节字符的解决方案，请注意此函数将给出无效的Unicode字符串或看起来很有趣的有效字符串。<a href="https://stackoverflow.com/questions/958908/how-do-you-reverse-a-string-in-place-in-javascript/16776621#16776621" target="_blank" rel="noopener">需要注意</a></p>
<p><img src="http://cdn.mydearest.cn/blog/images/reverse.jpg" alt="有意思的图"></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">reverse</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> str.split().reverse().join();</span><br><span class="line">    <span class="comment">// Array.from(str).reverse().join('')</span></span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用递归</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">reverseString</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> (str === <span class="string">''</span>) ? <span class="string">''</span> : reverseString(str.substr(<span class="number">1</span>)) + str.charAt(<span class="number">0</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">reverse</span>(<span class="params">[h, ...t]</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> h ? reverse(t) + h : <span class="string">''</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">reverse</span>(<span class="params">str</span>)</span>&#123;</span><br><span class="line">    <span class="keyword">var</span> s =<span class="string">''</span>;</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">let</span> i = str.length;i &gt; <span class="number">0</span>; i--) &#123;</span><br><span class="line">        s += str[i<span class="number">-1</span>]; <span class="comment">// charAt substring substr</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> s;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="delete-varible"><a href="#delete-varible" class="headerlink" title="delete varible"></a>delete varible</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">delete</span> xxx <span class="comment">// true</span></span><br><span class="line"><span class="keyword">delete</span> <span class="built_in">window</span> <span class="comment">//false</span></span><br></pre></td></tr></table></figure>
<h2 id="jquery指定元素滚动到视图中间"><a href="#jquery指定元素滚动到视图中间" class="headerlink" title="jquery指定元素滚动到视图中间"></a>jquery指定元素滚动到视图中间</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">scrollToViewCenter</span>(<span class="params">$element</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (!$element) &#123;</span><br><span class="line">        <span class="keyword">return</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">var</span> winOffsetHeight = <span class="built_in">document</span>.body.offsetHeight; <span class="comment">// 浏览器窗口可视区域高度</span></span><br><span class="line">    <span class="keyword">var</span> eleOffsetTop = $element.offset().top;</span><br><span class="line">    <span class="keyword">var</span> top = eleOffsetTop - (winOffsetHeight / <span class="number">2</span>);</span><br><span class="line">    <span class="built_in">window</span>.scrollTo(<span class="number">0</span>, top);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="new-Array"><a href="#new-Array" class="headerlink" title="new Array()"></a>new Array()</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> myArray = <span class="built_in">Array</span>();</span><br><span class="line">myArray[<span class="string">'A'</span>] = <span class="string">"Athens"</span>;</span><br><span class="line">myArray[<span class="string">'B'</span>] = <span class="string">"Berlin"</span>;</span><br><span class="line">myArray[<span class="string">'0'</span>] = <span class="number">1</span>;</span><br><span class="line"><span class="comment">// length 1 只统计数字索引</span></span><br><span class="line"><span class="comment">// length范围 0~2**32-1</span></span><br></pre></td></tr></table></figure>
<h2 id="构造函数scope-safe模式"><a href="#构造函数scope-safe模式" class="headerlink" title="构造函数scope-safe模式"></a>构造函数scope-safe模式</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Book</span>(<span class="params">name</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="number">1111</span>,<span class="keyword">this</span>)</span><br><span class="line">    <span class="keyword">if</span>(!(<span class="keyword">this</span> <span class="keyword">instanceof</span> Book))&#123;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> Book(name);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">this</span>.name=name;</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> bookone = Book(<span class="string">'harry-potter'</span>);</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">a</span>(<span class="params">b</span>)</span>&#123;</span><br><span class="line">  alert(b);</span><br><span class="line">  <span class="function"><span class="keyword">function</span> <span class="title">b</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    alert(b);</span><br><span class="line">  &#125;</span><br><span class="line">  b();</span><br><span class="line">&#125;</span><br><span class="line">a();</span><br></pre></td></tr></table></figure>
<h2 id="jquery设置-important"><a href="#jquery设置-important" class="headerlink" title="jquery设置!important"></a>jquery设置!important</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(<span class="string">"#container"</span>).css(<span class="string">"top"</span>);</span><br><span class="line">$(<span class="string">"#container"</span>).css(<span class="string">"top"</span>,<span class="string">"15px"</span>);</span><br><span class="line">$(<span class="string">"#container"</span>).css(<span class="string">"cssText"</span>,<span class="string">"overflow:auto !important;"</span>)</span><br></pre></td></tr></table></figure>
<h2 id="empty-选择器区分样式"><a href="#empty-选择器区分样式" class="headerlink" title=":empty 选择器区分样式"></a>:empty 选择器区分样式</h2><blockquote>
<p>:empty 选择器匹配没有子元素（包括文本节点）的每个元素。</p>
</blockquote>
<p>这里举个小红点的例子：
<img src="http://cdn.mydearest.cn/blog/images/empty.png" alt="empty"></p>
<p>如图所示，小红点有内容以及无内容的样式差异，按照常规的处理方式，我们一般是通过类名区分，但是我们可以简单通过:empty选择器区分开。
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"jd"</span>&gt;</span><span class="tag">&lt;<span class="name">i</span>&gt;</span>3<span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.jd</span> <span class="selector-tag">i</span><span class="selector-pseudo">:empty</span> &#123;</span><br><span class="line">    // 无内容的小红点样式</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.jd</span> <span class="selector-tag">i</span><span class="selector-pseudo">:not(</span><span class="selector-pseudo">:empty)</span> &#123;</span><br><span class="line">    // 有内容的小红点样式</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="arr-reduce-callback-initialValue"><a href="#arr-reduce-callback-initialValue" class="headerlink" title="arr.reduce(callback[, initialValue])"></a>arr.reduce(callback[, initialValue])</h2><ul>
<li>reduce接受两个参数, 一个回调, 一个初始值</li>
<li>回调函数接受四个参数 previousValue, currentValue, currentIndex, array</li>
</ul>
<blockquote>
<p>第一个表达式等价于 Math.pow(3, 2) =&gt; 9; Math.pow(9, 1) =&gt;9</p>
</blockquote>
<blockquote>
<p>第二个表达式异常 Uncaught TypeError: Reduce of empty array with no initial value</p>
</blockquote>
<h2 id="变量提升"><a href="#变量提升" class="headerlink" title="变量提升"></a>变量提升</h2><p>在 JavaScript中， functions 和 variables 会被提升。变量提升是JavaScript将声明移至作用域 scope (全局域或者当前函数作用域) 顶部的行为。
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> name = <span class="string">'World!'</span>;</span><br><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">typeof</span> name === <span class="string">'undefined'</span>) &#123;</span><br><span class="line">        <span class="keyword">var</span> name = <span class="string">'Jack'</span>;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'Goodbye '</span> + name);</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="string">'Hello '</span> + name);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;)();</span><br><span class="line"><span class="comment">// Goodbye Jack</span></span><br></pre></td></tr></table></figure></p>
<h2 id="最大安全数-1值没有变化-会导致循环"><a href="#最大安全数-1值没有变化-会导致循环" class="headerlink" title="最大安全数 + 1值没有变化 会导致循环"></a>最大安全数 + 1值没有变化 会导致循环</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> END = <span class="built_in">Math</span>.pow(<span class="number">2</span>, <span class="number">53</span>);</span><br><span class="line"><span class="keyword">var</span> START = END - <span class="number">100</span>;</span><br><span class="line"><span class="keyword">var</span> count = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i = START; i &lt;= END; i++) &#123;</span><br><span class="line">    count++;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(count); <span class="comment">// 循环</span></span><br></pre></td></tr></table></figure>
<h2 id="稀疏数组"><a href="#稀疏数组" class="headerlink" title="稀疏数组"></a>稀疏数组</h2><p>没有内容的数组, array 上的操作会跳过这些未初始化的’坑’.
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> ary = [<span class="number">0</span>,<span class="number">1</span>,<span class="number">2</span>];</span><br><span class="line">ary[<span class="number">10</span>] = <span class="number">10</span>;</span><br><span class="line">ary.filter(<span class="function"><span class="keyword">function</span>(<span class="params">x</span>) </span>&#123; <span class="keyword">return</span> x === <span class="literal">undefined</span>;&#125;);</span><br><span class="line"><span class="comment">// []</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> ary = <span class="built_in">Array</span>(<span class="number">3</span>);</span><br><span class="line">ary[<span class="number">0</span>]=<span class="number">2</span></span><br><span class="line">ary.map(<span class="function"><span class="keyword">function</span>(<span class="params">elem</span>) </span>&#123; <span class="keyword">return</span> <span class="string">'1'</span>; &#125;);</span><br><span class="line"><span class="comment">// ["1", undefined × 2]</span></span><br></pre></td></tr></table></figure></p>
<h2 id="一个鲜为人知的实事-Array-prototype-gt"><a href="#一个鲜为人知的实事-Array-prototype-gt" class="headerlink" title="一个鲜为人知的实事: Array.prototype =&gt; []"></a>一个鲜为人知的实事: Array.prototype =&gt; []</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.isArray( <span class="built_in">Array</span>.prototype )</span><br><span class="line"><span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<h2 id="arguments在es6有初始值时不同"><a href="#arguments在es6有初始值时不同" class="headerlink" title="arguments在es6有初始值时不同"></a>arguments在es6有初始值时不同</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sidEffecting</span>(<span class="params">ary</span>) </span>&#123;</span><br><span class="line">  ary[<span class="number">0</span>] = ary[<span class="number">2</span>];</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params">a,b,c</span>) </span>&#123;</span><br><span class="line">  c = <span class="number">10</span></span><br><span class="line">  sidEffecting(<span class="built_in">arguments</span>);</span><br><span class="line">  <span class="keyword">return</span> a + b + c;</span><br><span class="line">&#125;</span><br><span class="line">bar(<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>)</span><br><span class="line"><span class="comment">// 10 + 1 + 10 = 21</span></span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sidEffecting</span>(<span class="params">ary</span>) </span>&#123;</span><br><span class="line">  ary[<span class="number">0</span>] = ary[<span class="number">2</span>];</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params">a,b,c=<span class="number">3</span></span>) </span>&#123;</span><br><span class="line">  c = <span class="number">10</span></span><br><span class="line">  sidEffecting(<span class="built_in">arguments</span>);</span><br><span class="line">  <span class="keyword">return</span> a + b + c;</span><br><span class="line">&#125;</span><br><span class="line">bar(<span class="number">1</span>,<span class="number">1</span>,<span class="number">1</span>)</span><br><span class="line"><span class="comment">// 1 + 1 + 10 = 12</span></span><br></pre></td></tr></table></figure>
<h2 id="reverse返回调用者"><a href="#reverse返回调用者" class="headerlink" title="reverse返回调用者"></a>reverse返回调用者</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = [].reverse;</span><br><span class="line">x();</span><br><span class="line"><span class="comment">// window</span></span><br></pre></td></tr></table></figure>
<h2 id="Number-MIN-VALUE-gt-0"><a href="#Number-MIN-VALUE-gt-0" class="headerlink" title="Number.MIN_VALUE &gt; 0"></a>Number.MIN_VALUE &gt; 0</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Number</span>.MIN_VALUE &gt; <span class="number">0</span></span><br><span class="line"><span class="comment">// 5e-324 true</span></span><br></pre></td></tr></table></figure>
<h2 id="抽象相等"><a href="#抽象相等" class="headerlink" title="抽象相等"></a>抽象相等</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = [<span class="number">0</span>];</span><br><span class="line"><span class="keyword">if</span> ([<span class="number">0</span>]) &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(a == <span class="literal">true</span>);</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">"wut"</span>);</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// false</span></span><br></pre></td></tr></table></figure>
<p><img src="http://cdn.mydearest.cn/blog/images/equality.png" alt="equality"></p>
<h2 id="隐式类型转换"><a href="#隐式类型转换" class="headerlink" title="隐式类型转换"></a>隐式类型转换</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span> &lt; <span class="number">2</span> &lt; <span class="number">3</span>, <span class="number">3</span> &lt; <span class="number">2</span> &lt; <span class="number">1</span>]</span><br><span class="line"></span><br><span class="line"><span class="comment">// 1 &lt; 2 =&gt; true &lt; 3 =&gt; 1 &lt; 3 true</span></span><br><span class="line"><span class="comment">// 3 &lt; 2 =&gt; false &lt; 1 =&gt; 0 &lt; 1 true</span></span><br><span class="line"><span class="comment">// [true,true]</span></span><br><span class="line"></span><br><span class="line"><span class="number">2</span> == [[[<span class="number">2</span>]]] <span class="comment">// true</span></span><br></pre></td></tr></table></figure>
<h2 id="number"><a href="#number" class="headerlink" title="number + ."></a>number + .</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">3.</span>toString() <span class="comment">// error (3).toString()</span></span><br><span class="line"><span class="number">3.</span>.toString() <span class="comment">// '3'</span></span><br><span class="line"><span class="number">3.</span>..toString() <span class="comment">// error</span></span><br></pre></td></tr></table></figure>
<h2 id="automatic-global"><a href="#automatic-global" class="headerlink" title="automatic global"></a>automatic global</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> x = y = <span class="number">1</span>;</span><br><span class="line">&#125;)();</span><br><span class="line"><span class="built_in">console</span>.log(y); <span class="comment">// 1</span></span><br><span class="line"><span class="built_in">console</span>.log(x); <span class="comment">// x is not defined</span></span><br></pre></td></tr></table></figure>
<h2 id="regexp-expression"><a href="#regexp-expression" class="headerlink" title="regexp expression"></a>regexp expression</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="regexp">/123/</span>,</span><br><span class="line">    b = <span class="regexp">/123/</span>;</span><br><span class="line">a == b</span><br><span class="line">a === b</span><br><span class="line"><span class="comment">// false false</span></span><br></pre></td></tr></table></figure>
<h2 id="function-name-is-readonly"><a href="#function-name-is-readonly" class="headerlink" title="function name is readonly"></a>function name is readonly</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>&#123; &#125;</span><br><span class="line"><span class="keyword">var</span> oldName = foo.name;</span><br><span class="line">foo.name = <span class="string">"bar"</span>;</span><br><span class="line">[oldName, foo.name]</span><br><span class="line"><span class="comment">// 'foo' 'foo'</span></span><br></pre></td></tr></table></figure>
<h2 id="parseInt-坑"><a href="#parseInt-坑" class="headerlink" title="parseInt 坑"></a>parseInt 坑</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">"1 2 3"</span>.replace(<span class="regexp">/\d/g</span>, <span class="built_in">parseInt</span>)</span><br><span class="line"><span class="comment">// [1, 0], [2, 2], [3, 4]</span></span><br><span class="line"><span class="comment">// "1 NaN 3"</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="number">3</span>, <span class="number">8</span>) <span class="comment">// 3</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="number">3</span>, <span class="number">2</span>) <span class="comment">// NaN</span></span><br><span class="line"><span class="built_in">parseInt</span>(<span class="number">3</span>, <span class="number">0</span>) <span class="comment">// 3</span></span><br></pre></td></tr></table></figure>
<h2 id="function-prototype"><a href="#function-prototype" class="headerlink" title="function prototype"></a>function prototype</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>) </span>&#123;&#125;</span><br><span class="line"><span class="keyword">var</span> parent = <span class="built_in">Object</span>.getPrototypeOf(f);</span><br><span class="line">f.name <span class="comment">// f</span></span><br><span class="line">parent.name <span class="comment">// empty</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="built_in">eval</span>(f.name) <span class="comment">// function</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="built_in">eval</span>(parent.name) <span class="comment">//  error</span></span><br></pre></td></tr></table></figure>
<h2 id="regexp-translate"><a href="#regexp-translate" class="headerlink" title="regexp translate"></a>regexp translate</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> lowerCaseOnly =  <span class="regexp">/^[a-z]+$/</span>;</span><br><span class="line">[lowerCaseOnly.test(<span class="literal">null</span>), lowerCaseOnly.test()]</span><br><span class="line"><span class="comment">// 转化成'null' 'undefined'</span></span><br><span class="line"><span class="comment">// true true</span></span><br></pre></td></tr></table></figure>
<h2 id="join-“-“"><a href="#join-“-“" class="headerlink" title="[,,,].join(“, “)"></a>[,,,].join(“, “)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">[,,,].join(<span class="string">", "</span>)</span><br><span class="line"><span class="comment">// ", , "</span></span><br></pre></td></tr></table></figure>
<h2 id="function-length"><a href="#function-length" class="headerlink" title="function length"></a>function length</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="built_in">Function</span>.length,</span><br><span class="line">    b = <span class="keyword">new</span> <span class="built_in">Function</span>().length</span><br><span class="line">a === b</span><br><span class="line"><span class="comment">// 1 === 0 false</span></span><br></pre></td></tr></table></figure>
<h2 id="Date-equal"><a href="#Date-equal" class="headerlink" title="Date equal"></a>Date equal</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> a = <span class="built_in">Date</span>(<span class="number">0</span>);</span><br><span class="line"><span class="keyword">var</span> b = <span class="keyword">new</span> <span class="built_in">Date</span>(<span class="number">0</span>);</span><br><span class="line"><span class="keyword">var</span> c = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">[a === b, b === c, a === c]</span><br><span class="line"><span class="comment">// false false false</span></span><br></pre></td></tr></table></figure>
<h2 id="function-scope-param"><a href="#function-scope-param" class="headerlink" title="function scope param"></a>function scope param</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params">a</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> a;</span><br><span class="line">    <span class="keyword">return</span> a;</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params">a</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> a = <span class="string">'bye'</span>;</span><br><span class="line">    <span class="keyword">return</span> a;</span><br><span class="line">&#125;</span><br><span class="line">[foo(<span class="string">'hello'</span>), bar(<span class="string">'hello'</span>)]</span><br><span class="line"><span class="comment">// ["hello", "bye"]</span></span><br></pre></td></tr></table></figure>
<h2 id="nodejs-Event模块的简单实现"><a href="#nodejs-Event模块的简单实现" class="headerlink" title="nodejs Event模块的简单实现"></a>nodejs Event模块的简单实现</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Event</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.on = <span class="function"><span class="keyword">function</span> (<span class="params">eventName, callback</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (!<span class="keyword">this</span>.handlers) &#123;</span><br><span class="line">            <span class="keyword">this</span>.handlers = &#123;&#125;;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">if</span> (!<span class="keyword">this</span>.handlers[eventName])&#123;</span><br><span class="line">            <span class="keyword">this</span>.handlers[eventName] = [];</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">this</span>.handlers[eventName].push(callback);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">this</span>.emit = <span class="function"><span class="keyword">function</span> (<span class="params">eventName, data</span>) </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (<span class="keyword">this</span>.handlers[eventName]) &#123;</span><br><span class="line">            <span class="keyword">this</span>.handlers[eventName].forEach(<span class="function">(<span class="params">item</span>)=&gt;</span>&#123;</span><br><span class="line">                item(data);</span><br><span class="line">            &#125;);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="实现超链接显示A网站实际跳转B网站"><a href="#实现超链接显示A网站实际跳转B网站" class="headerlink" title="实现超链接显示A网站实际跳转B网站"></a>实现超链接显示A网站实际跳转B网站</h2><figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"//www.tmall.com"</span> <span class="attr">onclick</span>=<span class="string">"host='jd.com'"</span>&gt;</span>tmall<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="nodejs-恶作剧：给系统创建一个叫-node-modules-的用户，然后-npm-install-就无法使用了"><a href="#nodejs-恶作剧：给系统创建一个叫-node-modules-的用户，然后-npm-install-就无法使用了" class="headerlink" title="nodejs 恶作剧：给系统创建一个叫 node_modules 的用户，然后 npm install 就无法使用了"></a>nodejs 恶作剧：给系统创建一个叫 node_modules 的用户，然后 npm install 就无法使用了</h2><h2 id="最简单的方式实现console-log-1-返回0"><a href="#最简单的方式实现console-log-1-返回0" class="headerlink" title="最简单的方式实现console.log(1)返回0"></a>最简单的方式实现<code>console.log(1)</code>返回0</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">console</span> = <span class="built_in">Math</span>;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>); <span class="comment">// 0</span></span><br></pre></td></tr></table></figure>
<h2 id="如何将整个网站页面变成黑白色-灰阶"><a href="#如何将整个网站页面变成黑白色-灰阶" class="headerlink" title="如何将整个网站页面变成黑白色?(灰阶)"></a>如何将整个网站页面变成黑白色?(灰阶)</h2><p>对于一些需要悼念的日子，很多人也都想把自己的网站弄成全站黑白来表示自己的哀悼之情。还有其他特殊原因（比如公祭日）对部分事件表示哀悼，所以需要把整个网站设置为灰色或者黑白方格。</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">html</span> &#123;</span><br><span class="line"><span class="attribute">-webkit-filter</span>: <span class="built_in">grayscale</span>(100%);</span><br><span class="line"><span class="attribute">-moz-filter</span>: <span class="built_in">grayscale</span>(100%);</span><br><span class="line"><span class="attribute">-ms-filter</span>: <span class="built_in">grayscale</span>(100%);</span><br><span class="line"><span class="attribute">-o-filter</span>: <span class="built_in">grayscale</span>(100%);</span><br><span class="line"><span class="attribute">filter</span>:progid:DXImageTransform.Microsoft.<span class="built_in">BasicImage</span>(grayscale=1);</span><br><span class="line"><span class="attribute">_filter</span>:none;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>filter 是滤镜的意思，filter:gray 的意思就是说给页面加上一个灰度的滤镜，所以 html 里面的所有内容都会变成黑白的了。
<img src="http://cdn.mydearest.cn/blog/images/grayFilter.png" alt="黑白色"></p>
<h2 id="黑幕效果"><a href="#黑幕效果" class="headerlink" title="黑幕效果"></a>黑幕效果</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.heimu</span>, <span class="selector-class">.heimu</span> <span class="selector-tag">a</span>, <span class="selector-tag">a</span> <span class="selector-class">.heimu</span>, <span class="selector-class">.heimu</span> <span class="selector-tag">a</span><span class="selector-class">.new</span> &#123;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="number">#252525</span>;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#252525</span>;</span><br><span class="line">    <span class="attribute">text-shadow</span>: none;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.heimu</span><span class="selector-pseudo">:hover</span>, <span class="selector-class">.heimu</span><span class="selector-pseudo">:active</span>,</span><br><span class="line"><span class="selector-class">.heimu</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.heimu</span>, <span class="selector-class">.heimu</span><span class="selector-pseudo">:active</span> <span class="selector-class">.heimu</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: white <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.heimu</span><span class="selector-pseudo">:hover</span> <span class="selector-tag">a</span>, <span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.heimu</span>,</span><br><span class="line"><span class="selector-class">.heimu</span><span class="selector-pseudo">:active</span> <span class="selector-tag">a</span>, <span class="selector-tag">a</span><span class="selector-pseudo">:active</span> <span class="selector-class">.heimu</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: lightblue <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.heimu</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.new</span>, <span class="selector-class">.heimu</span> <span class="selector-class">.new</span><span class="selector-pseudo">:hover</span>, <span class="selector-class">.new</span><span class="selector-pseudo">:hover</span> <span class="selector-class">.heimu</span>,</span><br><span class="line"><span class="selector-class">.heimu</span><span class="selector-pseudo">:active</span> <span class="selector-class">.new</span>, <span class="selector-class">.heimu</span> <span class="selector-class">.new</span><span class="selector-pseudo">:active</span>, <span class="selector-class">.new</span><span class="selector-pseudo">:active</span> <span class="selector-class">.heimu</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#BA0000</span> <span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><span class="heimu">太对了哥，哥太对</span></p>
<h2 id="字符串和base64相互转换-编码、解码"><a href="#字符串和base64相互转换-编码、解码" class="headerlink" title="字符串和base64相互转换(编码、解码)"></a>字符串和base64相互转换(编码、解码)</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 字符串转base64</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">encode</span>(<span class="params">str</span>)</span>&#123;</span><br><span class="line">    <span class="comment">// 对字符串进行编码</span></span><br><span class="line">    <span class="keyword">var</span> encode = <span class="built_in">encodeURI</span>(str);</span><br><span class="line">    <span class="comment">// 对编码的字符串转化base64</span></span><br><span class="line">    <span class="keyword">var</span> base64 = btoa(encode);</span><br><span class="line">    <span class="keyword">return</span> base64;</span><br><span class="line">&#125;</span><br><span class="line"> </span><br><span class="line"><span class="comment">// base64转字符串</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">decode</span>(<span class="params">base64</span>)</span>&#123;</span><br><span class="line">    <span class="comment">// 对base64转编码</span></span><br><span class="line">    <span class="keyword">var</span> decode = atob(base64);</span><br><span class="line">    <span class="comment">// 编码转字符串</span></span><br><span class="line">    <span class="keyword">var</span> str = <span class="built_in">decodeURI</span>(decode);</span><br><span class="line">    <span class="keyword">return</span> str;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">echo test|base64 #加密</span><br><span class="line">echo dGVzdAo= |base64 -d #解密</span><br></pre></td></tr></table></figure>
<h2 id="随机名称"><a href="#随机名称" class="headerlink" title="随机名称"></a>随机名称</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getRandomName</span>(<span class="params"></span>) </span>&#123;</span><br><span class="line">    <span class="keyword">let</span> number = getRandomNum(<span class="number">1</span>, <span class="number">9</span>);</span><br><span class="line">    <span class="keyword">let</span> hash = <span class="built_in">parseInt</span>(</span><br><span class="line">        ((<span class="keyword">new</span> <span class="built_in">Date</span>().getTime() % <span class="number">3839</span>) + <span class="number">256</span>).toString(),</span><br><span class="line">        <span class="number">10</span></span><br><span class="line">    ).toString(<span class="number">16</span>);</span><br><span class="line">    <span class="keyword">let</span> randomName = <span class="string">'prefix'</span> + hash + number;</span><br><span class="line">    <span class="keyword">return</span> randomName;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getRandomNum</span>(<span class="params">max, min</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> range = max - min;</span><br><span class="line">    <span class="keyword">var</span> rand = <span class="built_in">Math</span>.random();</span><br><span class="line">    <span class="keyword">return</span> min + <span class="built_in">Math</span>.round(rand * range);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="IDEA连接Github时出现：Failed-to-connect-to-github-com-port-443-Connection-refused的解决方法"><a href="#IDEA连接Github时出现：Failed-to-connect-to-github-com-port-443-Connection-refused的解决方法" class="headerlink" title="IDEA连接Github时出现：Failed to connect to github.com port 443: Connection refused的解决方法"></a>IDEA连接Github时出现：Failed to connect to github.com port 443: Connection refused的解决方法</h2><p>本地hosts文件中配置不正确导致的。</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git config --global http.proxy http://127.0.0.1:1080</span><br><span class="line"></span><br><span class="line">git config --global https.proxy http://127.0.0.1:1080</span><br></pre></td></tr></table></figure>
<p>但创建完仓库后 push 不上去，这个时候就需要取消代理
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">git config --global --unset http.proxy</span><br><span class="line"></span><br><span class="line">git config --global --unset https.proxy</span><br></pre></td></tr></table></figure></p>
<h2 id="counter"><a href="#counter" class="headerlink" title="counter"></a>counter</h2><p><a href="https://flagcounter.com/" target="_blank" rel="noopener">FlagCounter</a></p>
<p><a href="http://busuanzi.ibruce.info" target="_blank" rel="noopener">不蒜子访问统计</a></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"</span>&gt;</span><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_pv"</span>&gt;</span></span><br><span class="line">    总访问次数:<span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_pv"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_uv"</span>&gt;</span></span><br><span class="line">  访问次数:<span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_uv"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="i18n语料替换"><a href="#i18n语料替换" class="headerlink" title="i18n语料替换"></a>i18n语料替换</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">i18nReplace</span>(<span class="params">s, o</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">if</span> (!s || !o) &#123;</span><br><span class="line">    <span class="keyword">return</span>;</span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span> s.replace</span><br><span class="line">    ? s.replace(<span class="regexp">/\&#123;\s*([^\|\&#125;]+?)\s*(?:\|([^\&#125;]*))?\s*\&#125;/g</span>, <span class="function"><span class="keyword">function</span>(<span class="params"></span></span></span><br><span class="line"><span class="function"><span class="params">        match,</span></span></span><br><span class="line"><span class="function"><span class="params">        key</span></span></span><br><span class="line"><span class="function"><span class="params">      </span>) </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> o[key] !== <span class="literal">undefined</span> ? o[key] : match;</span><br><span class="line">      &#125;)</span><br><span class="line">    : s;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">i18nReplace(<span class="string">'123&#123;0&#125;开始了'</span>,&#123;<span class="number">0</span>:<span class="string">'奇怪'</span>&#125;)</span><br><span class="line"><span class="comment">// "123奇怪开始了"</span></span><br></pre></td></tr></table></figure>
<h2 id="一行代码实现简单模版引擎"><a href="#一行代码实现简单模版引擎" class="headerlink" title="一行代码实现简单模版引擎"></a>一行代码实现简单模版引擎</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">template</span>(<span class="params">tpl, data</span>) </span>&#123;</span><br><span class="line">  <span class="keyword">return</span> tpl.replace(<span class="regexp">/&#123;&#123;(.*?)&#125;&#125;/g</span>, (match, key) =&gt; data[key.trim()]);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 使用：</span></span><br><span class="line">template(<span class="string">'我是&#123;&#123;name&#125;&#125;，年龄&#123;&#123;age&#125;&#125;，性别&#123;&#123;sex&#125;&#125;'</span>, &#123;<span class="attr">name</span>: <span class="string">'陈宇'</span>, <span class="attr">age</span>: <span class="number">25</span>, <span class="attr">sex</span>: <span class="string">'男'</span>&#125;); </span><br><span class="line"><span class="comment">// "我是陈宇，年龄25，性别男"</span></span><br></pre></td></tr></table></figure>
<h2 id="快速生成包含26个字母的数组"><a href="#快速生成包含26个字母的数组" class="headerlink" title="快速生成包含26个字母的数组"></a>快速生成包含26个字母的数组</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.from(&#123;<span class="attr">length</span>: <span class="number">26</span>&#125;, (_, i) =&gt; <span class="built_in">String</span>.fromCharCode(<span class="number">65</span> + i));</span><br></pre></td></tr></table></figure>
<h2 id="多行元素的文本省略号"><a href="#多行元素的文本省略号" class="headerlink" title="多行元素的文本省略号"></a>多行元素的文本省略号</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">    <span class="attribute">display</span>: -webkit-box;</span><br><span class="line">    <span class="attribute">-webkit-box-orient</span>: vertical;</span><br><span class="line">    <span class="attribute">-webkit-line-clamp</span>: <span class="number">3</span>;</span><br><span class="line">    <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="如何实现sleep效果"><a href="#如何实现sleep效果" class="headerlink" title="如何实现sleep效果"></a>如何实现sleep效果</h2><h3 id="while"><a href="#while" class="headerlink" title="while"></a>while</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params">ms</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">var</span> start = <span class="built_in">Date</span>.now(), expires = start + ms;</span><br><span class="line">    <span class="keyword">while</span>(<span class="built_in">Date</span>.now()&lt;expires);</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'醒了'</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">sleep(<span class="number">2000</span>);</span><br></pre></td></tr></table></figure>
<h3 id="promise"><a href="#promise" class="headerlink" title="promise"></a>promise</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params">ms</span>) </span>&#123;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resolve,reject</span>)=&gt;</span>&#123;</span><br><span class="line">        setTimeout(resolve,ms);</span><br><span class="line">    &#125;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">sleep(<span class="number">2000</span>).then(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'醒了'</span>);</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="实现一些主流框架的循环渲染"><a href="#实现一些主流框架的循环渲染" class="headerlink" title="实现一些主流框架的循环渲染"></a>实现一些主流框架的循环渲染</h2><h3 id="问题"><a href="#问题" class="headerlink" title="问题"></a>问题</h3><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> items = [</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">'item1'</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">'item2'</span> &#125;</span><br><span class="line">];</span><br><span class="line"><span class="keyword">var</span> str = <span class="string">'&lt;div ali-for="item in items"&gt;&#123;&#123;item.name&#125;&#125;&lt;div&gt;'</span>;</span><br><span class="line"></span><br><span class="line"><span class="comment">// 对应生成的dom  </span></span><br><span class="line">ParseDom(str);</span><br><span class="line"><span class="comment">// &lt;div&gt;item1&lt;/div&gt;  </span></span><br><span class="line"><span class="comment">// &lt;div&gt;item2&lt;/div&gt;</span></span><br></pre></td></tr></table></figure>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> items = [</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">'item1'</span> &#125;,</span><br><span class="line">  &#123; <span class="attr">name</span>: <span class="string">'item2'</span> &#125;</span><br><span class="line">];</span><br><span class="line"></span><br><span class="line"><span class="comment">// ***********</span></span><br><span class="line"><span class="keyword">const</span> s = &#123;&#125;</span><br><span class="line">s.items = items</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ParseDom</span>(<span class="params">str</span>) </span>&#123;</span><br><span class="line">	<span class="comment">// 借助dom子节点使用dom方法</span></span><br><span class="line">	<span class="keyword">const</span> mid = <span class="built_in">document</span>.createElement(<span class="string">'div'</span>)</span><br><span class="line">	mid.innerHTML = str</span><br><span class="line">	<span class="keyword">const</span> &#123; children &#125; = mid</span><br><span class="line">	<span class="keyword">let</span> res = <span class="string">''</span></span><br><span class="line">	<span class="comment">// 遍历子节点</span></span><br><span class="line">	;[...children].forEach(<span class="function"><span class="params">c</span> =&gt;</span> &#123;</span><br><span class="line">		<span class="comment">// 找属性节点</span></span><br><span class="line">		<span class="keyword">const</span> attrs = [...c.attributes]</span><br><span class="line">		<span class="keyword">const</span> targetAttr = attrs.find(<span class="function"><span class="params">x</span> =&gt;</span> x.name === <span class="string">'ali-for'</span>);</span><br><span class="line">		<span class="keyword">const</span> nodename = c.nodeName.toLocaleLowerCase();</span><br><span class="line">		<span class="comment">// 属性全部写进去</span></span><br><span class="line">		<span class="keyword">const</span> attrsStr = attrs.reduce(<span class="function">(<span class="params">r, c</span>) =&gt;</span> &#123;</span><br><span class="line">			<span class="keyword">if</span> (c.name !== <span class="string">'ali-for'</span>) &#123;</span><br><span class="line">				r += <span class="string">` <span class="subst">$&#123;c.name&#125;</span>="<span class="subst">$&#123;c.value&#125;</span>"`</span></span><br><span class="line">			&#125;</span><br><span class="line">			<span class="keyword">return</span> r</span><br><span class="line">		&#125;, <span class="string">''</span>)</span><br><span class="line">		<span class="keyword">if</span> (!targetAttr) &#123;</span><br><span class="line">			<span class="comment">// 没有循环渲染标记</span></span><br><span class="line">			res += <span class="string">`&lt;<span class="subst">$&#123;nodename&#125;</span><span class="subst">$&#123;attrsStr&#125;</span>&gt;<span class="subst">$&#123;c.innerHTML&#125;</span>&lt;/<span class="subst">$&#123;nodename&#125;</span>&gt;`</span></span><br><span class="line">			<span class="keyword">return</span></span><br><span class="line">		&#125;</span><br><span class="line">		<span class="comment">// 循环渲染</span></span><br><span class="line">		<span class="keyword">const</span> vfor = targetAttr.nodeValue</span><br><span class="line">		<span class="keyword">const</span> o = vfor.split(<span class="string">' in '</span>)[<span class="number">1</span>]</span><br><span class="line">		<span class="keyword">const</span> k = c.innerText.match(<span class="regexp">/\&#123;\&#123;(.*)\&#125;\&#125;/</span>)[<span class="number">1</span>].split(<span class="string">'.'</span>)[<span class="number">1</span>]</span><br><span class="line">		;s[o].forEach(<span class="function"><span class="params">x</span> =&gt;</span> &#123;</span><br><span class="line">			res += <span class="string">`&lt;<span class="subst">$&#123;nodename&#125;</span><span class="subst">$&#123;attrsStr&#125;</span>&gt;<span class="subst">$&#123;x[k]&#125;</span>&lt;/<span class="subst">$&#123;nodename&#125;</span>&gt;`</span></span><br><span class="line">		&#125;)</span><br><span class="line">	&#125;)</span><br><span class="line">	<span class="keyword">return</span> res</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">// ***********</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">var</span> str = <span class="string">'&lt;div ali-for="item in items"&gt;&#123;&#123;item.name&#125;&#125;&lt;/div&gt;'</span>;</span><br><span class="line"><span class="comment">// 对应生成的dom  </span></span><br><span class="line">ParseDom(str);</span><br></pre></td></tr></table></figure>
<h2 id="思考：如何实现-npm-install-？"><a href="#思考：如何实现-npm-install-？" class="headerlink" title="思考：如何实现 npm install ？"></a>思考：如何实现 npm install ？</h2><ul>
<li><p>假如老板给你 一个 npm 包的列表 ，要你找出这些 npm 包的所有依赖包名，简述一下实现思路</p>
</li>
<li><p>对包和包的依赖列表进行缓存 -&gt; A 和 B 都依赖了 C，从 A 分析一次后，B 还需要再分析吗？</p>
</li>
<li><p>使用并发，但要控制并发量 -&gt; 一个包一个包的查会不会太慢？请求这么频繁 npm 会不会封你的 ip</p>
</li>
<li><p>找依赖的时候使用循环，而不是递归 -&gt; 如果一个包的依赖非常非常复杂，内存爆了怎么办
具有失败重试和离线缓存 -&gt; 中途网络挂掉怎么处理？失败的一直失败怎么办？</p>
</li>
</ul>
<h2 id="Github无法访问-hosts-配置"><a href="#Github无法访问-hosts-配置" class="headerlink" title="Github无法访问 hosts 配置"></a>Github无法访问 hosts 配置</h2><figure class="highlight shell"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">#</span><span class="bash"> GitHub Start</span></span><br><span class="line">192.30.253.112 github.com</span><br><span class="line">192.30.253.118 gist.github.com</span><br><span class="line">151.101.112.133 assets-cdn.github.com</span><br><span class="line">151.101.184.133 raw.githubusercontent.com</span><br><span class="line">151.101.112.133 gist.githubusercontent.com</span><br><span class="line">151.101.112.133 avatars0.githubusercontent.com</span><br><span class="line">151.101.112.133 avatars1.githubusercontent.com</span><br><span class="line">151.101.184.133 avatars2.githubusercontent.com</span><br><span class="line">151.101.12.133 avatars3.githubusercontent.com</span><br><span class="line">151.101.12.133 avatars4.githubusercontent.com</span><br><span class="line">151.101.184.133 avatars5.githubusercontent.com</span><br><span class="line">151.101.184.133 avatars6.githubusercontent.com</span><br><span class="line">151.101.184.133 avatars7.githubusercontent.com</span><br><span class="line">151.101.12.133 avatars8.githubusercontent.com</span><br><span class="line">151.101.184.133 cloud.githubusercontent.com</span><br><span class="line">151.101.112.133 camo.githubusercontent.com</span><br><span class="line"><span class="meta">#</span><span class="bash"> GitHub End</span></span><br></pre></td></tr></table></figure>
<p>修改方法：</p>
<ul>
<li><p>Windows:
修改文件 C:/Windows/system32/drivers/etc/hosts</p>
</li>
<li><p>Linux系:
修改文件 /etc/hosts</p>
</li>
<li><p>Android:
修改文件 /system/etc/hosts （需要Root）</p>
</li>
</ul>
<h2 id="保留两位小数"><a href="#保留两位小数" class="headerlink" title="保留两位小数"></a>保留两位小数</h2><ol>
<li>toFixed()方法<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> num =<span class="number">2.446242342</span>;  </span><br><span class="line">num = num.toFixed(<span class="number">2</span>); </span><br><span class="line"><span class="built_in">console</span>.log(num); <span class="comment">//2.45</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>详见<a href="&#39;https://mydearest.cn/toFixed%E6%96%B9%E6%B3%95%E6%B3%A8%E6%84%8F%E7%82%B9.html&#39;">toFixed方法注意点</a></p>
<ol>
<li><p>Math.floor()</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">num = <span class="built_in">Math</span>.floor(num * <span class="number">100</span>) / <span class="number">100</span>;</span><br><span class="line"><span class="built_in">console</span>.log(num); <span class="comment">//2.44</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>字符串匹配</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">num = <span class="built_in">Number</span>(num.toString().match(<span class="regexp">/^\d+(?:\.\d&#123;0,2&#125;)?/</span>));</span><br><span class="line"><span class="built_in">console</span>.log(num); <span class="comment">//2.44</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>保留两位小数 浮点数四舍五入 位数不够 不补0</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">fomatFloat</span>(<span class="params">src,pos</span>)</span>&#123;    </span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Math</span>.round(src*<span class="built_in">Math</span>.pow(<span class="number">10</span>, pos))/<span class="built_in">Math</span>.pow(<span class="number">10</span>, pos);    </span><br><span class="line">&#125; </span><br><span class="line"><span class="built_in">console</span>.log(fomatFloat(<span class="number">3.12645</span>,<span class="number">2</span>)); <span class="comment">// 3.13</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<h2 id="H5-语音合成-SpeechSynthesisUtterance-API"><a href="#H5-语音合成-SpeechSynthesisUtterance-API" class="headerlink" title="H5 语音合成 SpeechSynthesisUtterance API"></a>H5 语音合成 SpeechSynthesisUtterance API</h2><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> utterance = <span class="keyword">new</span> SpeechSynthesisUtterance(<span class="string">'cosyer'</span>);</span><br><span class="line"><span class="built_in">window</span>.speechSynthesis.speak(utterance);</span><br></pre></td></tr></table></figure>

      
    </div>
    
    
    

    <div>
      
        <div>
    
        <div class="text-center line pages-end">
				<span>本文结束<i class="fa fa-meh-o fa-fw"></i>感谢您的阅读</span>
        </div>
    
</div>
      
    </div>

    <div>
      
        
<div class="my_post_copyright">
  <script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script>
  <!-- JS库 sweetalert 可修改路径 -->
  <script type="text/javascript" src="https://cdn.staticfile.org/jquery/1.7.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/sweetalert@1.0.0/dist/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/sweetalert@1.0.0/dist/sweetalert.css">
  <p><span>本文标题:</span><a href="/smallknowledge.html">你所不知道的前端冷门小知识(长期更新)</a></p>
  <p><span>文章作者:</span><a href="/" title="访问 陈宇（cosyer） 的个人博客">陈宇（cosyer）</a></p>
  <p><span>发布时间:</span>2018年06月11日 - 21:06</p>
  <p><span>最后更新:</span>2020年05月08日 - 00:05</p>
  <p><span>原始链接:</span><a href="/smallknowledge.html" title="你所不知道的前端冷门小知识(长期更新)">http://mydearest.cn/smallknowledge.html</a>
    <span class="copy-path"  title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="http://mydearest.cn/smallknowledge.html"  aria-label=" 复制成功！"></i></span>
  </p>
  <p><span>许可协议:</span><i class="fa fa-creative-commons"></i> <a rel="license" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a> 转载请保留原文链接及作者。</p>  
</div>
<script> 
    var clipboard = new Clipboard('.fa-clipboard');
    clipboard.on('success', $(function(){
      $(".fa-clipboard").click(function(){
        swal({
          title: "",     
          text: '复制成功',   
          timer: 500,
          showConfirmButton: false
        });
      });
    }));  
</script>

      
    </div>

    

    
      <div>
        <div style="padding: 10px 0; margin: 20px auto; width: 90%; text-align: center;">
  <div>坚持原创技术分享，您的支持将鼓励我继续创作！</div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>赏</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/wechatpay.png" alt="陈宇（cosyer） WeChat Pay"/>
        <p>WeChat Pay</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/alipay.png" alt="陈宇（cosyer） Alipay"/>
        <p>Alipay</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/知识/" rel="tag"><i class="fa fa-tag fa-fw"></i> 知识</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/react16.html" rel="next" title="快速了解React 16新特性">
                <i class="fa fa-chevron-left"></i> 快速了解React 16新特性
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/prototype.html" rel="prev" title="JavaScript深入之从原型到原型链">
                JavaScript深入之从原型到原型链 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          
            
  <div class="comments" id="comments">
    
      <div class="comments v" id="comments"></div>
    
  </div>


          
        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap" >
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
          <img class="site-author-image" itemprop="image"
               src="/images/avatar.jpg"
               alt="陈宇（cosyer）" />
          <p class="site-author-name" itemprop="name">陈宇（cosyer）</p>
           
              <p class="site-description motion-element" itemprop="description">不去做的话永远也做不到。</p>
           
        </div>
        <nav class="site-state motion-element">

          
            <div class="site-state-item site-state-posts">
              <a href="/archives/">
                <span class="site-state-item-count">134</span>
                <span class="site-state-item-name">日志</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-categories">
              <a href="/categories/index.html">
                <span class="site-state-item-count">7</span>
                <span class="site-state-item-name">分类</span>
              </a>
            </div>
          

          
            
            
            <div class="site-state-item site-state-tags">
              <a href="/tags/index.html">
                <span class="site-state-item-count">55</span>
                <span class="site-state-item-name">标签</span>
              </a>
            </div>
          

        </nav>

        
          <div class="feed-link motion-element">
            <a href="/rss2.xml" rel="alternate">
              <i class="fa fa-rss"></i>
              RSS
            </a>
          </div>
        

        <div class="links-of-author motion-element">
          
            
              <span class="links-of-author-item">
                <a rel="external nofollow" href="https://github.com/cosyer" target="_blank" title="GitHub">
                  
                    <i class="fa fa-fw fa-github"></i>
                  
                    
                      GitHub
                    
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a rel="external nofollow" href="https://twitter.com/yzchenyu1995" target="_blank" title="Twitter">
                  
                    <i class="fa fa-fw fa-twitter"></i>
                  
                    
                      Twitter
                    
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a rel="external nofollow" href="mailto:yzchenyu1995@gmail.com" target="_blank" title="E-Mail">
                  
                    <i class="fa fa-fw fa-envelope"></i>
                  
                    
                      E-Mail
                    
                </a>
              </span>
            
              <span class="links-of-author-item">
                <a rel="external nofollow" href="https://www.facebook.com/profile.php?id=100025666071215" target="_blank" title="FB Page">
                  
                    <i class="fa fa-fw fa-facebook"></i>
                  
                    
                      FB Page
                    
                </a>
              </span>
            
          
        </div>

        
        

        
        
          <div class="links-of-blogroll motion-element links-of-blogroll-inline">
            <div class="links-of-blogroll-title">
              <i class="fa  fa-fw fa-globe"></i>
              推荐阅读
            </div>
            <ul class="links-of-blogroll-list">
              
                <li class="links-of-blogroll-item">
                  <a rel="external nofollow" href="http://callmesoul.cn" title="Callmesoul" target="_blank">Callmesoul</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a rel="external nofollow" href="https://www.jstips.co/" title="JsTips" target="_blank">JsTips</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a rel="external nofollow" href="http://dir.mydearest.cn/motion/" title="Personal Site" target="_blank">Personal Site</a>
                </li>
              
                <li class="links-of-blogroll-item">
                  <a rel="external nofollow" href="http://resume.mydearest.cn/" title="Resume" target="_blank">Resume</a>
                </li>
              
            </ul>
          </div>
        

        


      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#void"><span class="nav-number">1.</span> <span class="nav-text">void</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Element-scrollIntoViewIfNeeded"><span class="nav-number">2.</span> <span class="nav-text">Element.scrollIntoViewIfNeeded</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS取整数部分"><span class="nav-number">3.</span> <span class="nav-text">JS取整数部分</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#js取小数部分"><span class="nav-number">4.</span> <span class="nav-text">js取小数部分</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JS浮点数运算-原因浮点数无法用二进制准确表示"><span class="nav-number">5.</span> <span class="nav-text">JS浮点数运算(原因浮点数无法用二进制准确表示)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Object-toString"><span class="nav-number">6.</span> <span class="nav-text">Object.toString()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#全等判断"><span class="nav-number">7.</span> <span class="nav-text">全等判断</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#判断NaN"><span class="nav-number">8.</span> <span class="nav-text">判断NaN</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#isFinite"><span class="nav-number">9.</span> <span class="nav-text">isFinite</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#try-catch跳出forEach循环"><span class="nav-number">10.</span> <span class="nav-text">try-catch跳出forEach循环</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#fetch模拟post进行api测试"><span class="nav-number">11.</span> <span class="nav-text">fetch模拟post进行api测试</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#实现var-a-add-2-3-4-函数柯里化"><span class="nav-number">12.</span> <span class="nav-text">实现var a = add(2)(3)(4) 函数柯里化</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#阶乘"><span class="nav-number">13.</span> <span class="nav-text">阶乘</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#arguments-callee的替换方案"><span class="nav-number">14.</span> <span class="nav-text">arguments.callee的替换方案</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Date相关"><span class="nav-number">15.</span> <span class="nav-text">Date相关</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#Date构造函数"><span class="nav-number">15.1.</span> <span class="nav-text">Date构造函数</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#当前时间"><span class="nav-number">15.2.</span> <span class="nav-text">当前时间</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Date计时"><span class="nav-number">15.3.</span> <span class="nav-text">Date计时</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Date原型扩展方法"><span class="nav-number">15.4.</span> <span class="nav-text">Date原型扩展方法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#页面加载时间"><span class="nav-number">16.</span> <span class="nav-text">页面加载时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#常用标签"><span class="nav-number">17.</span> <span class="nav-text">常用标签</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#获取url参数"><span class="nav-number">18.</span> <span class="nav-text">获取url参数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#String原型方法扩展"><span class="nav-number">19.</span> <span class="nav-text">String原型方法扩展</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#拦截控制台、右键和F12"><span class="nav-number">20.</span> <span class="nav-text">拦截控制台、右键和F12</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#崩溃欺骗"><span class="nav-number">21.</span> <span class="nav-text">崩溃欺骗</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#a标签"><span class="nav-number">22.</span> <span class="nav-text">a标签</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#lt-script-gt-元素放在-HTML-文件底部"><span class="nav-number">23.</span> <span class="nav-text">&lt;script&gt;元素放在 HTML 文件底部</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#某个字符在字符串中的个数"><span class="nav-number">24.</span> <span class="nav-text">某个字符在字符串中的个数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#数组求最大值方法汇总"><span class="nav-number">25.</span> <span class="nav-text">数组求最大值方法汇总</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#回到顶部"><span class="nav-number">26.</span> <span class="nav-text">回到顶部</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#手机号处理中间4位替换成-数据脱敏"><span class="nav-number">27.</span> <span class="nav-text">手机号处理中间4位替换成*(数据脱敏)</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#方法1-substr方法"><span class="nav-number">27.1.</span> <span class="nav-text">方法1 substr方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#方法2-正则匹配分组"><span class="nav-number">27.2.</span> <span class="nav-text">方法2 正则匹配分组</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#转换树形结构数据"><span class="nav-number">28.</span> <span class="nav-text">转换树形结构数据</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#浏览器返回上一页"><span class="nav-number">29.</span> <span class="nav-text">浏览器返回上一页</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#浏览器前进后退"><span class="nav-number">30.</span> <span class="nav-text">浏览器前进后退</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#去重数组里对象相同值得key"><span class="nav-number">31.</span> <span class="nav-text">去重数组里对象相同值得key</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#变量声明"><span class="nav-number">32.</span> <span class="nav-text">变量声明</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#with语句"><span class="nav-number">33.</span> <span class="nav-text">with语句</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#boolean类型在进行比较时会类型转换成number"><span class="nav-number">34.</span> <span class="nav-text">boolean类型在进行比较时会类型转换成number</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#RGB到十六进制"><span class="nav-number">35.</span> <span class="nav-text">RGB到十六进制</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#滚动到顶部"><span class="nav-number">36.</span> <span class="nav-text">滚动到顶部</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#求和"><span class="nav-number">37.</span> <span class="nav-text">求和</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#大写每个单词的首字母"><span class="nav-number">38.</span> <span class="nav-text">大写每个单词的首字母</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#计算数组中某值出现的次数"><span class="nav-number">39.</span> <span class="nav-text">计算数组中某值出现的次数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#数组间的区别"><span class="nav-number">40.</span> <span class="nav-text">数组间的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#阶乘-1"><span class="nav-number">41.</span> <span class="nav-text">阶乘</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#获取滚动位置"><span class="nav-number">42.</span> <span class="nav-text">获取滚动位置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#最大公约数"><span class="nav-number">43.</span> <span class="nav-text">最大公约数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#UUID生成器"><span class="nav-number">44.</span> <span class="nav-text">UUID生成器</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#检查变量是否声明"><span class="nav-number">45.</span> <span class="nav-text">检查变量是否声明</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#使用对象结构代替-switch…case"><span class="nav-number">46.</span> <span class="nav-text">使用对象结构代替 switch…case</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#隐藏console打印在哪一行的信息"><span class="nav-number">47.</span> <span class="nav-text">隐藏console打印在哪一行的信息</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#手机震动"><span class="nav-number">48.</span> <span class="nav-text">手机震动</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-2-11-用sort方法进行排序"><span class="nav-number">49.</span> <span class="nav-text">[1,2,11]用sort方法进行排序</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-2-3-map-parseInt"><span class="nav-number">50.</span> <span class="nav-text">[1,2,3].map(parseInt)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#图片上传"><span class="nav-number">51.</span> <span class="nav-text">图片上传</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#实现JSONP"><span class="nav-number">52.</span> <span class="nav-text">实现JSONP</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#chrome浏览器拦截多次window-open"><span class="nav-number">53.</span> <span class="nav-text">chrome浏览器拦截多次window.open</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#mixed"><span class="nav-number">54.</span> <span class="nav-text">mixed</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#高度"><span class="nav-number">55.</span> <span class="nav-text">高度</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#自适应单位"><span class="nav-number">56.</span> <span class="nav-text">自适应单位</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#dom解绑事件"><span class="nav-number">57.</span> <span class="nav-text">dom解绑事件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#为元素解绑事件"><span class="nav-number">57.1.</span> <span class="nav-text">为元素解绑事件</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#位运算符"><span class="nav-number">58.</span> <span class="nav-text">位运算符</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#关闭当前页面"><span class="nav-number">59.</span> <span class="nav-text">关闭当前页面</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#字节节省写法"><span class="nav-number">60.</span> <span class="nav-text">字节节省写法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#简单计算页面FPS"><span class="nav-number">61.</span> <span class="nav-text">简单计算页面FPS</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#你不知道的new-target"><span class="nav-number">62.</span> <span class="nav-text">你不知道的new.target</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#es5写法"><span class="nav-number">62.1.</span> <span class="nav-text">es5写法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#es6写法"><span class="nav-number">62.2.</span> <span class="nav-text">es6写法</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#文件扩展名"><span class="nav-number">63.</span> <span class="nav-text">文件扩展名</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#blur和click冲突"><span class="nav-number">64.</span> <span class="nav-text">blur和click冲突</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#object标签"><span class="nav-number">65.</span> <span class="nav-text">object标签</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#escape、encodeURI、encodeURIComponent区别"><span class="nav-number">66.</span> <span class="nav-text">escape、encodeURI、encodeURIComponent区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#链式调用"><span class="nav-number">67.</span> <span class="nav-text">链式调用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#setTimeout-为不可执行的字符串时会造成内存泄漏"><span class="nav-number">68.</span> <span class="nav-text">setTimeout 为不可执行的字符串时会造成内存泄漏</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#JSON-parse和JSON-stringify其他参数"><span class="nav-number">69.</span> <span class="nav-text">JSON.parse和JSON.stringify其他参数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#随机数"><span class="nav-number">70.</span> <span class="nav-text">随机数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#chrome浏览器跳转调试"><span class="nav-number">71.</span> <span class="nav-text">chrome浏览器跳转调试</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#时间"><span class="nav-number">72.</span> <span class="nav-text">时间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#uuid生成"><span class="nav-number">73.</span> <span class="nav-text">uuid生成</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jq原生对照"><span class="nav-number">74.</span> <span class="nav-text">jq原生对照</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#实现复制tiny"><span class="nav-number">75.</span> <span class="nav-text">实现复制tiny</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#scrollbar滚动条样式优化"><span class="nav-number">76.</span> <span class="nav-text">scrollbar滚动条样式优化</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#内网ip段"><span class="nav-number">77.</span> <span class="nav-text">内网ip段</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#获取当前鼠标坐标"><span class="nav-number">78.</span> <span class="nav-text">获取当前鼠标坐标</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#类数组对象转数组"><span class="nav-number">79.</span> <span class="nav-text">类数组对象转数组</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#页面滚动条到底判断"><span class="nav-number">80.</span> <span class="nav-text">页面滚动条到底判断</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#yield函数"><span class="nav-number">81.</span> <span class="nav-text">yield函数</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#复制添加版权申明"><span class="nav-number">81.1.</span> <span class="nav-text">复制添加版权申明</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#包版本号"><span class="nav-number">82.</span> <span class="nav-text">包版本号</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#script标签关键字"><span class="nav-number">83.</span> <span class="nav-text">script标签关键字</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#防止对象篡改"><span class="nav-number">84.</span> <span class="nav-text">防止对象篡改</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#module-exports和exports"><span class="nav-number">85.</span> <span class="nav-text">module.exports和exports</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#meta自动跳转"><span class="nav-number">86.</span> <span class="nav-text">meta自动跳转</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#前端生成文件并下载"><span class="nav-number">87.</span> <span class="nav-text">前端生成文件并下载</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#防止frame嵌套"><span class="nav-number">88.</span> <span class="nav-text">防止frame嵌套</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#取反运算简化indexOf判断"><span class="nav-number">89.</span> <span class="nav-text">取反运算简化indexOf判断</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#已知年月，求当月多少天"><span class="nav-number">90.</span> <span class="nav-text">已知年月，求当月多少天</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#日期格式转化-2019-3-19-gt-2019-3-19"><span class="nav-number">91.</span> <span class="nav-text">日期格式转化 2019/3/19 =&gt; 2019-3-19</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#求数值的n次幂"><span class="nav-number">92.</span> <span class="nav-text">求数值的n次幂</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#分号的重要性"><span class="nav-number">93.</span> <span class="nav-text">分号的重要性</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#前端h5-download属性下载文件-appendChild兼容firefox"><span class="nav-number">94.</span> <span class="nav-text">前端h5 download属性下载文件(appendChild兼容firefox)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#禁止滚动条滚动"><span class="nav-number">95.</span> <span class="nav-text">禁止滚动条滚动</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#map等遍历注意事项"><span class="nav-number">96.</span> <span class="nav-text">map等遍历注意事项</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#符合密码学要求的随机值"><span class="nav-number">97.</span> <span class="nav-text">符合密码学要求的随机值</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#字符串反转"><span class="nav-number">98.</span> <span class="nav-text">字符串反转</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#delete-varible"><span class="nav-number">99.</span> <span class="nav-text">delete varible</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jquery指定元素滚动到视图中间"><span class="nav-number">100.</span> <span class="nav-text">jquery指定元素滚动到视图中间</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#new-Array"><span class="nav-number">101.</span> <span class="nav-text">new Array()</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#构造函数scope-safe模式"><span class="nav-number">102.</span> <span class="nav-text">构造函数scope-safe模式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#jquery设置-important"><span class="nav-number">103.</span> <span class="nav-text">jquery设置!important</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#empty-选择器区分样式"><span class="nav-number">104.</span> <span class="nav-text">:empty 选择器区分样式</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#arr-reduce-callback-initialValue"><span class="nav-number">105.</span> <span class="nav-text">arr.reduce(callback[, initialValue])</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#变量提升"><span class="nav-number">106.</span> <span class="nav-text">变量提升</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#最大安全数-1值没有变化-会导致循环"><span class="nav-number">107.</span> <span class="nav-text">最大安全数 + 1值没有变化 会导致循环</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#稀疏数组"><span class="nav-number">108.</span> <span class="nav-text">稀疏数组</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#一个鲜为人知的实事-Array-prototype-gt"><span class="nav-number">109.</span> <span class="nav-text">一个鲜为人知的实事: Array.prototype =&gt; []</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#arguments在es6有初始值时不同"><span class="nav-number">110.</span> <span class="nav-text">arguments在es6有初始值时不同</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#reverse返回调用者"><span class="nav-number">111.</span> <span class="nav-text">reverse返回调用者</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Number-MIN-VALUE-gt-0"><span class="nav-number">112.</span> <span class="nav-text">Number.MIN_VALUE &gt; 0</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#抽象相等"><span class="nav-number">113.</span> <span class="nav-text">抽象相等</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#隐式类型转换"><span class="nav-number">114.</span> <span class="nav-text">隐式类型转换</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#number"><span class="nav-number">115.</span> <span class="nav-text">number + .</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#automatic-global"><span class="nav-number">116.</span> <span class="nav-text">automatic global</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#regexp-expression"><span class="nav-number">117.</span> <span class="nav-text">regexp expression</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#function-name-is-readonly"><span class="nav-number">118.</span> <span class="nav-text">function name is readonly</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#parseInt-坑"><span class="nav-number">119.</span> <span class="nav-text">parseInt 坑</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#function-prototype"><span class="nav-number">120.</span> <span class="nav-text">function prototype</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#regexp-translate"><span class="nav-number">121.</span> <span class="nav-text">regexp translate</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#join-“-“"><span class="nav-number">122.</span> <span class="nav-text">[,,,].join(“, “)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#function-length"><span class="nav-number">123.</span> <span class="nav-text">function length</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Date-equal"><span class="nav-number">124.</span> <span class="nav-text">Date equal</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#function-scope-param"><span class="nav-number">125.</span> <span class="nav-text">function scope param</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#nodejs-Event模块的简单实现"><span class="nav-number">126.</span> <span class="nav-text">nodejs Event模块的简单实现</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#实现超链接显示A网站实际跳转B网站"><span class="nav-number">127.</span> <span class="nav-text">实现超链接显示A网站实际跳转B网站</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#nodejs-恶作剧：给系统创建一个叫-node-modules-的用户，然后-npm-install-就无法使用了"><span class="nav-number">128.</span> <span class="nav-text">nodejs 恶作剧：给系统创建一个叫 node_modules 的用户，然后 npm install 就无法使用了</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#最简单的方式实现console-log-1-返回0"><span class="nav-number">129.</span> <span class="nav-text">最简单的方式实现console.log(1)返回0</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#如何将整个网站页面变成黑白色-灰阶"><span class="nav-number">130.</span> <span class="nav-text">如何将整个网站页面变成黑白色?(灰阶)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#黑幕效果"><span class="nav-number">131.</span> <span class="nav-text">黑幕效果</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#字符串和base64相互转换-编码、解码"><span class="nav-number">132.</span> <span class="nav-text">字符串和base64相互转换(编码、解码)</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#随机名称"><span class="nav-number">133.</span> <span class="nav-text">随机名称</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#IDEA连接Github时出现：Failed-to-connect-to-github-com-port-443-Connection-refused的解决方法"><span class="nav-number">134.</span> <span class="nav-text">IDEA连接Github时出现：Failed to connect to github.com port 443: Connection refused的解决方法</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#counter"><span class="nav-number">135.</span> <span class="nav-text">counter</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#i18n语料替换"><span class="nav-number">136.</span> <span class="nav-text">i18n语料替换</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#一行代码实现简单模版引擎"><span class="nav-number">137.</span> <span class="nav-text">一行代码实现简单模版引擎</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#快速生成包含26个字母的数组"><span class="nav-number">138.</span> <span class="nav-text">快速生成包含26个字母的数组</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#多行元素的文本省略号"><span class="nav-number">139.</span> <span class="nav-text">多行元素的文本省略号</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#如何实现sleep效果"><span class="nav-number">140.</span> <span class="nav-text">如何实现sleep效果</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#while"><span class="nav-number">140.1.</span> <span class="nav-text">while</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#promise"><span class="nav-number">140.2.</span> <span class="nav-text">promise</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#实现一些主流框架的循环渲染"><span class="nav-number">141.</span> <span class="nav-text">实现一些主流框架的循环渲染</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#问题"><span class="nav-number">141.1.</span> <span class="nav-text">问题</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#思考：如何实现-npm-install-？"><span class="nav-number">142.</span> <span class="nav-text">思考：如何实现 npm install ？</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#Github无法访问-hosts-配置"><span class="nav-number">143.</span> <span class="nav-text">Github无法访问 hosts 配置</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#保留两位小数"><span class="nav-number">144.</span> <span class="nav-text">保留两位小数</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#H5-语音合成-SpeechSynthesisUtterance-API"><span class="nav-number">145.</span> <span class="nav-text">H5 语音合成 SpeechSynthesisUtterance API</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright" >
  
  &copy; 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">陈宇（cosyer）</span>
</div>
<div>
 <span class="alive"></span>
 </div>
<div class="powered-by">
  <i class="fa fa-users fa-fw"></i>
  <span id="busuanzi_container_site_uv">
    终于等到你(UV): <span id="busuanzi_value_site_uv"></span>
  </span>
  &nbsp;&nbsp;|&nbsp;&nbsp;
  <i class="fa fa-bar-chart-o fa-fw"></i>
  <span id="busuanzi_container_site_pv">
    欢迎再来(PV): <span id="busuanzi_value_site_pv"></span>
  </span>

  <div class="theme-info">
    <div class="powered-by"></div>
    <span class="post-count">Blog总字数: 234.6k字</span>
  </div>

  <div class="theme-info">
    <div class="powered-by"></div>
    <a class="post-count" href="http://www.beian.miit.gov.cn/" target="_blank">苏ICP备17005342号-1</a>
  </div>
</div>

<!--


<div class="powered-by">
  由 <a class="theme-link" href="https://hexo.io">Hexo</a> 强力驱动
</div>

<div class="theme-info">
  主题 -
  <a class="theme-link" href="https://github.com/iissnan/hexo-theme-next">
    NexT.Mist
  </a>
</div>

-->

        

        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>
<script type="text/javascript" src="https://cdn.lishaoy.net/js/index.js"></script>

















  


  
  

  
  



  


  


  




	





  






  <script src="https://cdn.lishaoy.net/js/av-min.js"></script>
  
  <script src='https://cdn.lishaoy.net/js/Valine.min.js'></script>

  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = '';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        av: AV,
        el: '#comments' ,
        appId: 'SKflNaQWS70153r2kOqgcGge-gzGzoHsz',
        appKey: 'gE9ySnRyOkS4UNzYJ7GOCa56',
        placeholder: '想说点什么 ：）',
        avatar: 'retro'
    });
  </script>



  

  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    var isXml = true;
    // Search DB path;
    var search_path = "search.json";
    if (search_path.length === 0) {
      search_path = "search.xml";
    } else if (/json$/i.test(search_path)) {
      isXml = false;
    }
    var path = "/" + search_path;
    // monitor main search box;

    var onPopupClose = function (e) {
      $('.popup').hide();
      $('#local-search-input').val('');
      $('.search-result-list').remove();
      $('#no-result').remove();
      $(".local-search-pop-overlay").remove();
      $('body').css('overflow', '');
    }

    function proceedsearch() {
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
        .css('overflow', 'hidden');
      $('.search-popup-overlay').click(onPopupClose);
      $('.popup').toggle();
      var $localSearchInput = $('#local-search-input');
      $localSearchInput.attr("autocapitalize", "none");
      $localSearchInput.attr("autocorrect", "off");
      $localSearchInput.focus();
    }

    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';

      // start loading animation
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay">' +
          '<div id="search-loading-icon">' +
          '<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
          '</div>' +
          '</div>')
        .css('overflow', 'hidden');
      $("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');

      $.ajax({
        url: path,
        dataType: isXml ? "xml" : "json",
        async: true,
        success: function(res) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = isXml ? $("entry", res).map(function() {
            return {
              title: $("title", this).text(),
              content: $("content",this).text(),
              url: $("url" , this).text()
            };
          }).get() : res;
          var input = document.getElementById(search_id);
          var resultContent = document.getElementById(content_id);
          var inputEventFunction = function() {
            var searchText = input.value.trim().toLowerCase();
            var keywords = searchText.split(/[\s\-]+/);
            if (keywords.length > 1) {
              keywords.push(searchText);
            }
            var resultItems = [];
            if (searchText.length > 0&&datas.length>0) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var hitCount = 0;
                var searchTextCount = 0;
                var title = data.title.trim();
                var titleInLowerCase = title.toLowerCase();
                var content =  data.content&&data.content.trim().replace(/<[^>]+>/g,"");
                var contentInLowerCase = content&&content.toLowerCase();
                var articleUrl = decodeURIComponent(data.url);
                var indexOfTitle = [];
                var indexOfContent = [];
                // only match articles with not empty titles
                if(title != '') {
                  keywords.forEach(function(keyword) {
                    function getIndexByWord(word, text, caseSensitive) {
                      var wordLen = word.length;
                      if (wordLen === 0) {
                        return [];
                      }
                      var startPosition = 0, position = [], index = [];
                      if (!caseSensitive) {
                        text = text&&text.toLowerCase();
                        word = word&&word.toLowerCase();
                      }
                      while ((position = text&&text.indexOf(word, startPosition)) > -1) {
                        index.push({position: position, word: word});
                        startPosition = position + wordLen;
                      }
                      return index;
                    }

                    indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
                    indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
                  });
                  if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
                    isMatch = true;
                    hitCount = indexOfTitle.length + indexOfContent.length;
                  }
                }

                // show search results

                if (isMatch) {
                  // sort index by position of keyword

                  [indexOfTitle, indexOfContent].forEach(function (index) {
                    index.sort(function (itemLeft, itemRight) {
                      if (itemRight.position !== itemLeft.position) {
                        return itemRight.position - itemLeft.position;
                      } else {
                        return itemLeft.word.length - itemRight.word.length;
                      }
                    });
                  });

                  // merge hits into slices

                  function mergeIntoSlice(text, start, end, index) {
                    var item = index[index.length - 1];
                    var position = item.position;
                    var word = item.word;
                    var hits = [];
                    var searchTextCountInSlice = 0;
                    while (position + word.length <= end && index.length != 0) {
                      if (word === searchText) {
                        searchTextCountInSlice++;
                      }
                      hits.push({position: position, length: word.length});
                      var wordEnd = position + word.length;

                      // move to next position of hit

                      index.pop();
                      while (index.length != 0) {
                        item = index[index.length - 1];
                        position = item.position;
                        word = item.word;
                        if (wordEnd > position) {
                          index.pop();
                        } else {
                          break;
                        }
                      }
                    }
                    searchTextCount += searchTextCountInSlice;
                    return {
                      hits: hits,
                      start: start,
                      end: end,
                      searchTextCount: searchTextCountInSlice
                    };
                  }

                  var slicesOfTitle = [];
                  if (indexOfTitle.length != 0) {
                    slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
                  }

                  var slicesOfContent = [];
                  while (indexOfContent.length != 0) {
                    var item = indexOfContent[indexOfContent.length - 1];
                    var position = item.position;
                    var word = item.word;
                    // cut out 100 characters
                    var start = position - 20;
                    var end = position + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if (end < position + word.length) {
                      end = position + word.length;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
                  }

                  // sort slices in content by search text's count and hits' count

                  slicesOfContent.sort(function (sliceLeft, sliceRight) {
                    if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
                      return sliceRight.searchTextCount - sliceLeft.searchTextCount;
                    } else if (sliceLeft.hits.length !== sliceRight.hits.length) {
                      return sliceRight.hits.length - sliceLeft.hits.length;
                    } else {
                      return sliceLeft.start - sliceRight.start;
                    }
                  });

                  // select top N slices in content

                  var upperBound = parseInt('1');
                  if (upperBound >= 0) {
                    slicesOfContent = slicesOfContent.slice(0, upperBound);
                  }

                  // highlight title and content

                  function highlightKeyword(text, slice) {
                    var result = '';
                    var prevEnd = slice.start;
                    slice.hits.forEach(function (hit) {
                      result += text.substring(prevEnd, hit.position);
                      var end = hit.position + hit.length;
                      result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
                      prevEnd = end;
                    });
                    result += text.substring(prevEnd, slice.end);
                    return result;
                  }

                  var resultItem = '';

                  if (slicesOfTitle.length != 0) {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
                  } else {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
                  }

                  slicesOfContent.forEach(function (slice) {
                    resultItem += "<a href='" + articleUrl + "'>" +
                      "<p class=\"search-result\">" + highlightKeyword(content, slice) +
                      "...</p>" + "</a>";
                  });

                  resultItem += "</li>";
                  resultItems.push({
                    item: resultItem,
                    searchTextCount: searchTextCount,
                    hitCount: hitCount,
                    id: resultItems.length
                  });
                }
              })
            };
            if (keywords.length === 1 && keywords[0] === "") {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
            } else if (resultItems.length === 0) {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
            } else {
              resultItems.sort(function (resultLeft, resultRight) {
                if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
                  return resultRight.searchTextCount - resultLeft.searchTextCount;
                } else if (resultLeft.hitCount !== resultRight.hitCount) {
                  return resultRight.hitCount - resultLeft.hitCount;
                } else {
                  return resultRight.id - resultLeft.id;
                }
              });
              var searchResultList = '<ul class=\"search-result-list\">';
              resultItems.forEach(function (result) {
                searchResultList += result.item;
              })
              searchResultList += "</ul>";
              resultContent.innerHTML = searchResultList;
            }
          }

          if ('auto' === 'auto') {
            input.addEventListener('input', inputEventFunction);
          } else {
            $('.search-icon').click(inputEventFunction);
            input.addEventListener('keypress', function (event) {
              if (event.keyCode === 13) {
                inputEventFunction();
              }
            });
          }

          // remove loading animation
          $(".local-search-pop-overlay").remove();
          $('body').css('overflow', '');

          proceedsearch();
        }
      });
    }

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched === false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(onPopupClose);
    $('.popup').click(function(e){
      e.stopPropagation();
    });
    $(document).on('keyup', function (event) {
      var shouldDismissSearchPopup = event.which === 27 &&
        $('.search-popup').is(':visible');
      if (shouldDismissSearchPopup) {
        onPopupClose();
      }
    });
  </script>




  

  
  <script src="https://cdn.lishaoy.net/js/av-core-mini-0.6.4.js"></script>
  <script>AV.initialize("SKflNaQWS70153r2kOqgcGge-gzGzoHsz", "gE9ySnRyOkS4UNzYJ7GOCa56");</script>
  <script>
    function showTime(Counter) {
      var query = new AV.Query(Counter);
      var entries = [];
      var $visitors = $(".leancloud_visitors");

      $visitors.each(function () {
        entries.push( $(this).attr("id").trim() );
      });

      query.containedIn('url', entries);
      query.find()
        .done(function (results) {
          var COUNT_CONTAINER_REF = '.leancloud-visitors-count';

          if (results.length === 0) {
            $visitors.find(COUNT_CONTAINER_REF).text(0);
            return;
          }

          for (var i = 0; i < results.length; i++) {
            var item = results[i];
            var url = item.get('url');
            var time = item.get('time');
            var element = document.getElementById(url);

            $(element).find(COUNT_CONTAINER_REF).text(time);
          }
          for(var i = 0; i < entries.length; i++) {
            var url = entries[i];
            var element = document.getElementById(url);
            var countSpan = $(element).find(COUNT_CONTAINER_REF);
            if( countSpan.text() == '') {
              countSpan.text(0);
            }
          }
        })
        .fail(function (object, error) {
          console.log("Error: " + error.code + " " + error.message);
        });
    }

    function addCount(Counter) {
      var $visitors = $(".leancloud_visitors");
      var url = $visitors.attr('id').trim();
      var title = $visitors.attr('data-flag-title').trim();
      var query = new AV.Query(Counter);

      query.equalTo("url", url);
      query.find({
        success: function(results) {
          if (results.length > 0) {
            var counter = results[0];
            counter.fetchWhenSave(true);
            counter.increment("time");
            counter.save(null, {
              success: function(counter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(counter.get('time'));
              },
              error: function(counter, error) {
                console.log('Failed to save Visitor num, with error message: ' + error.message);
              }
            });
          } else {
            var newcounter = new Counter();
            /* Set ACL */
            var acl = new AV.ACL();
            acl.setPublicReadAccess(true);
            acl.setPublicWriteAccess(true);
            newcounter.setACL(acl);
            /* End Set ACL */
            newcounter.set("title", title);
            newcounter.set("url", url);
            newcounter.set("time", 1);
            newcounter.save(null, {
              success: function(newcounter) {
                var $element = $(document.getElementById(url));
                $element.find('.leancloud-visitors-count').text(newcounter.get('time'));
              },
              error: function(newcounter, error) {
                console.log('Failed to create');
              }
            });
          }
        },
        error: function(error) {
          console.log('Error:' + error.code + " " + error.message);
        }
      });
    }

    $(function() {
      var Counter = AV.Object.extend("Counter");
      if ($('.leancloud_visitors').length == 1) {
        addCount(Counter);
      } else if ($('.post-title-link').length > 1) {
        showTime(Counter);
      }
    });
  </script>



  

  

  
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src=""></script>
  


  

  


  <div id="load" style=""></div>
  <!-- 新增看娘
  <script async src="/live2dw/js/perTips.js"></script>
  <script src="/live2dw/lib/L2Dwidget.min.js"></script>
  -->
  <!-- 页面点击小红心
  <script type="text/javascript" src="/js/src/love.js"></script>
  -->

  <!-- 背景动画
  <script type="text/javascript" src="/js/src/particle.js"></script>
  -->

   <!-- 输入爆炸效果来自 http://xiaowiba.com （小尾巴） 如有侵权，请通知我撤销
  <script type="text/javascript" src="/js/src/activate-power-mode.js"></script>
  -->

   <!-- UV、PV统计 不蒜子
   <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  -->
  <script type="text/javascript" src="https://cdn.lishaoy.net/js/all-min-d98fa596b6.js"></script>
   <!-- 自己的脚本
  <script type="text/javascript" src="/js/src/cosyer.js"></script>
  -->
  <script>
// 下雪
//(function($){$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'-50px'}).html('&#10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn:500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5+Math.random(),sizeFlake=options.minSize+Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100+Math.random()*200,durationFall=documentHeight*10+Math.random()*5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop,left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery);
//$.fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#00F' });

// 点线连接
!function () { function o(w, v, i) { return w.getAttribute(v) || i } function j(i) { return document.getElementsByTagName(i) } function l() { var i = j("script"), w = i.length, v = i[w - 1]; return { l: w, z: o(v, "zIndex", -1), o: o(v, "opacity", 1), c: o(v, "color", "255, 255, 255"), n: o(v, "count", 99) } } function k() { r = u.width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth, n = u.height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight } function b() { e.clearRect(0, 0, r, n); var w = [f].concat(t); var x, v, A, B, z, y; t.forEach(function (i) { i.x += i.xa, i.y += i.ya, i.xa *= i.x > r || i.x < 0 ? -1 : 1, i.ya *= i.y > n || i.y < 0 ? -1 : 1, e.fillRect(i.x - 0.5, i.y - 0.5, 1, 1); for (v = 0; v < w.length; v++) { x = w[v]; if (i !== x && null !== x.x && null !== x.y) { B = i.x - x.x, z = i.y - x.y, y = B * B + z * z; y < x.max && (x === f && y >= x.max / 2 && (i.x -= 0.03 * B, i.y -= 0.03 * z), A = (x.max - y) / x.max, e.beginPath(), e.lineWidth = A / 2, e.strokeStyle = "rgba(" + s.c + "," + (A + 0.2) + ")", e.moveTo(i.x, i.y), e.lineTo(x.x, x.y), e.stroke()) } } w.splice(w.indexOf(i), 1) }), m(b) } var u = document.createElement("canvas"), s = l(), c = "c_n" + s.l, e = u.getContext("2d"), r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) { window.setTimeout(i, 1000 / 45) }, a = Math.random, f = { x: null, y: null, max: 20000 }; u.id = c; u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o; j("body")[0].appendChild(u); k(), window.onresize = k; window.onmousemove = function (i) { i = i || window.event, f.x = i.clientX, f.y = i.clientY }, window.onmouseout = function () { f.x = null, f.y = null }; for (var t = [], p = 0; s.n > p; p++) { var h = a() * r, g = a() * n, q = 2 * a() - 1, d = 2 * a() - 1; t.push({ x: h, y: g, xa: q, ya: d, max: 6000 }) } setTimeout(function () { b() }, 100) }();

// 崩溃欺骗
var OriginTitle = document.title;
var titleTime;
document.addEventListener('visibilitychange', function () {
    if (document.hidden) {
        $('[rel="icon"]').attr('href', "/img/TEP.ico");
        document.title = '╭(°A°`)╮ 页面崩溃啦 ~';
        clearTimeout(titleTime);
    }
    else {
        $('[rel="icon"]').attr('href', "/favicon.ico");
        document.title = '(ฅ>ω<*ฅ) 噫又好了~' + OriginTitle;
        titleTime = setTimeout(function () {
            document.title = OriginTitle;
        }, 2000);
    }
});

// 存活时间
var aliveList=document.getElementsByClassName("alive")
setInterval(function() { 
var time = new Date(); 
// 程序计时的月从0开始取值后+1 
//根据自己博客的创建时间更改数值 
var t = "博客存活了"+Math.floor((+new Date - 1527868800000) / (1000 * 60 * 60 * 24)) + "天 " + time.getHours() + "小时" 
+ time.getMinutes() + "分" + time.getSeconds() + "秒"; 
aliveList[0].innerHTML = t; 
}, 1000); 
// 统计页面加载时间
window.onload = function () {
  var loadTime = window.performance.timing.domContentLoadedEventEnd-window.performance.timing.navigationStart; 
  console.log('Page load time is '+ loadTime);
}
</script>
  <script> $(function(){ $('#loader').css('display','none');});</script>
<style>
    .comments.no-post {
      background: transparent;
    }
    .no-post.v *{
      color: #ddd;
    }
    .v .vlist p {
      margin: 12px 0;
    }
    .v .vbtn {
      background: #fbfbfb;
      padding: .3rem 1.2em;
      border: 1px solid #dddddd75;
    }
    .no-post.v .vbtn {
      background: #2222220a;
    }
    .no-post.v .vbtn:active, .no-post.v .vbtn:hover {
      background-color: #fff;
    }
    .no-post.v .vwrap {
      border: 1px solid #f0f0f036;;
    }
    .no-post.v a {
      color: #ddd;
    }
    .v ul {
      padding-left: 25px;
    }
    .v ul li {
      list-style: disc;
      padding: 2px 15px 0 0;
    }
    .v .vlist strong , .vinput.vpreview strong {
        color: #87daff;
        font-size: 108%;
    }
    .v .vlist .vcard .vhead .vsys {
        background: #87daff17;
        color: #aaa;
        border: 1px solid #87daff1f;
        padding: 1px 5px;
        font-size: 12px;
        line-height: 1.4;
    }

    .no-post.v .vlist .vcard .vhead .vsys{
      background: #ededed1f;
      color: #808080;
      padding: 1px 5px;
      font-size: 12px;
      line-height: 1.4;
      border: none;
    }

    .v .vlist .vcard .vcontent a {
      color: #86dbff;
      border-bottom-color: #86dbff99;
    }

    .v .vlist .vcard .vcontent a:hover {
        color: #d7191a;
        border-bottom-color: #222;
    }

    .no-post.v .vlist .vcard section {
        border-bottom: 1px dashed #f5f5f55e;
    }

    .v .vwrap .vheader .vinput {
        width: 33.33%;
        border-bottom: 1px dashed #dedede45;
    }
    .no-post.v .vwrap .vheader .vinput::-webkit-input-placeholder {
        color: #808080;
    }
    .no-post.v .vwrap .vheader .vinput:-ms-input-placeholder{  /* Internet Explorer 10-11 */
        color: #808080;
    }
    .v .txt-right {
        display: none;
    }

    .v .vlist .vcard .vcontent .code, .v .vlist .vcard .vcontent code, .v .vlist .vcard .vcontent pre , .vinput.vpreview code , .vinput.vpreview pre {
      color: #005098fc;
      background: #87daffb8;
      border-radius: 4px;
      box-shadow: 0 0 2px #87daff;
      font-size: 90%;
      padding: 2px 6px;
    }
    .v .vlist .vcard .vcontent img {
      max-width: 18px;
      display: inline-block;
    }

    .v .vlist .vcard .vcontent img{
      max-width:18px;
      display:inline-block
    }

    .v .vwrap .vheader .vinput:focus {
      border-bottom: 1px solid #87daff;
    }
    .v .vlist .vcard .vcontent pre , .vinput.vpreview pre {
        background: #87daff21;
        border-radius: 4px;
        box-shadow: 0 0 2px #ffffff33;
    }
    .v .vlist .vcard .vcontent pre code ,.vinput.vpreview pre code {
        color: #87daff;
        background: #87daff00;
        border-radius: 4px;
        box-shadow: 0 0 2px #87daff05;
    }
    .v .vlist .vcard .vcontent.expand:after {
      color: #ff0000de;
      font-size: 110%;
      font-weight: bold;
      background: #87daff38;
      border-bottom-right-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    .comments.no-post .vlist .vcard .vcontent.expand:after {
      color: #fff;
    }
    @media screen and (max-width: 414px) {
        .v .vlist {
            padding-left: 0;
        }
    }
    .v .vlist .vcard .vcontent.expand:before {
        background: linear-gradient(180deg,hsla(0, 0%, 100%, 0),hsla(199, 100%, 76%, 0.22));
        background: -webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,0)),to(hsla(199, 100%, 76%, 0.22));
    }
</style>

</body>
</html>
